Salut,
Je suis toujours bloqué sur un exercice d'Auto Complete sur un tableau dynamique (moyennant javascript), je vous explique.
1. J'ai un tableau dynamique qui fonctionne à merveille. J'ajoute les lignes et je les annule sans problème avec du javascript (je partage avec vous mon code pour toute fin utile).
2. J'ai un Auto Complete qui fonctionne aussi très bien (qui se connecte sur la base de donnée sqlserver et rafraîchi ma zone de texte en moments de saisie).
Mon problème c'est que la zone de texte stipulée par le code d'autocomplete est identifié par un 'id' : #id_country hors je dois avoir un id dynamique sur mon tableau
Code d'auto complete :
1 2 3 4 5 6 7
| $(document).ready(function()
{
$("#id_country").autocomplete("ajaxcomplete.php",
{
selectFirst: true
});
}); |
Le code du tableau :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| /* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName)
{
if ( ! element )
return null;
else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
return element;
else
return getParent(element.parentNode, parentTagName);
}
/* ajoute une ligne */
function addLigne(link) {
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td,'TABLE');
// 2. on va manipuler le TBODY
var tbody = table.tBodies[0];
// 3. on clone la ligne de reference
var newTr = tbody.rows[0].cloneNode(true);
tbody.appendChild(newTr);
if ( document.all )
newTr.style.display = "block"; // pour IE
else
newTr.style.display = "table-row"; // pour Gecko
}
/* supprimer une ligne */
function delLigne(link)
{
// 1. récuperer le node "TABLE" à manipuler
var td = link.parentNode;
var table = getParent(td, 'TABLE');
// 2. récuperer le TBODY
var tbody = table.tBodies[0];
// 3. Supprimer le TR
tbody.removeChild(getParent(td, 'TR'));
}
/*
window.onload = dtableInit;
/* initialise le script */
function dtableInit()
{
var table = document.getElementsByTagName('TABLE');
for ( var i = 0; i < table.length; i++ )
{
// on récupère tous les tableaux dynamiques
if ( table[i].className == 'dTable' )
{
var tbody = table[i].tBodies[0];
var newTr = tbody.rows[0].cloneNode(true);
// on masque la première ligne du tbody (la ligne de reference)
tbody.rows[0].style.display = 'none';
// on en ajoute une
tbody.appendChild(newTr);
}
}
} |
le code de mon tableau dont la zone de texte objet d'auto complete :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <form name="form" method="POST">
<table class="dTable" align="center">
<thead>
<tr bgcolor="#999999">
<th> Id </th>
<th>Countries </th>
<th width="10px">devise</th>
<th> </th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5"><a href="#" onclick="addLigne(this); return false;"> Ajouter un pays</a></th>
</tr>
</tfoot>
<tbody>
<tr>
<td> <input type="text" name="id[]" style="width:40px"/> </td>
<td>
<input name="country[]" type="text" id="id_country" size="20"/>
</td>
<td> <input type="text" name="txt_devise[]" style="width:80px" /> </td>
<td> <a href="#" onclick="delLigne(this); return false;"> Annuler </a> </td>
</tr>
</tbody>
</table> |
Mon problème:
1. L'auto saisie fonctionne très bien sur la 1ere ligne étant l'id (id_country ) est bien celui du 1er code dessus.
2. Le faite de faire un [] devant (id_country ) sur la zone de texte
<input name="country[]" type="text" id="id_country" size="20"/>
n'est pas reconnue par le script d'autocpmletion et ne permet pas l'autosaisie.
Je sollicite votre intelligence pour résoudre ce problème
Merci à l'avance .
Partager