Bonjours à tous,
J'utilise une fonction javascript pour ajouter et supprimer des lignes dans une table. Mon problème est au niveau de la suppression de ligne. Merci beaucoup à ceux qui pourront m'aider.
1er problème: Tout fonctionne sauf que lorsque des données sont entrées dans les champs TEXTAREA, le script efface tout les autres TEXTAREA. Il y a seulement le premier INPUT qui fonctionne dans chaque ajout de ligne.
2ieme problème: Pour chaque ligne ajouté, il y a un bouton à gauche et un image à droit qui permet de supprimer la ligne, mais le bouton de gauche ne fonctionne pas lorsqu'il reste 1 ligne à supprimer.
Voici mon code complèt pour supprimer une ligne dans une table avec javascript:
Code :
<html><head><title></title></head>
<body>
<input type="button" value="Ajouter" onClick="addRow('table0');">
<input id="cnt" type="text" value="0">
<br>
<br>
<table id="table0" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">
<tbody>
</tbody>
</table>
<br>
<br>
<script>
// fonction getelement
function getel(elm) {
return document.getElementById(elm);
}
// fonction d'ajout d'une ligne
function addRow(nTable) {
var ta = getel(nTable);
// insertion de la ligne en fin de tableau
var myRow = ta.insertRow(-1);
// récupération de l'index de la ligne insérée, et on ajoute 1 car on souhaite un tableau allant de la ligne 1 à n
var idx = myRow.rowIndex + 1;
// insertion d'une cellule sur la ligne
var myCell = myRow.insertCell(-1);
// remplissage de la première cellule avec le texte et les input
// les identifiants des objets générés contiennent le rowIndex(+1) de la ligne insérée
//
// Exemple d'utilisation dans le innerHTML:
// 'Fichier n° ' + idx + '<input type="text" id="iA' + idx + '"><input type="text" id="iB' + idx + '">'
//
//
myCell.innerHTML = '<table border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">'
+'<tr>'
+'<td width="60" align="left" valign="top" style="border-right:1px dashed #999999;">Fichier n° ' + idx + '<br><br><a id="btn_del' + idx + '" title="Supprimer ce fichier" style="color:#003366; cursor:hand;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';" onclick="delRow(\'table0\',' + idx + ');">Supprimer</a></td>'
+'<td align="center" valign="middle" width="140" height="140" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; padding:5px;"><img src="http://intranet.sbi-international.com/images/Empty_folder_128.png" width="138" height="138" style="border:1px dashed #999999;;"><br><br><a title="Modifier ce fichier" style="color:#003366; cursor:hand; font-size:16px;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';">Modifier</a><br><br></td>'
+'<td align="left" valign="top" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; border-right:1px dashed #999999; padding:5px;"><u>Titre du fichier:</u><br><input name="txtTitre" id="iA' + idx + '" type="text" size="92" maxlength="90"><br><u>Description du fichier:</u><br><textarea name="txtContenu" id="iB' + idx + '" cols="70" rows="8"></textarea><br><input name="txtImgLink" type="text"></td>'
+'</tr><tr><td colspan="3" height="20"></td></tr></table>';
// insertion d'une seconde cellule sur la ligne
myCell = myRow.insertCell(-1);
// remplissage de la seconde cellule avec les boutons
// de la même manière, les identifiants des objets img générés contiennent le rowIndex(+1) de la ligne insérée
myCell.innerHTML = '<img id="btn_del' + idx + '" src="http://intranet.sbi-international.com/icones/page_white_delete.png" onclick="delRow(\'table0\',' + idx + ');">';
getel('cnt').value++;
}
// fonction de supression d'une ligne
function delRow(nTable,idx) {
var ta = getel(nTable);
// suppression de la ligne
// on souhaite supprimer la ligne dont l'index (partant de zéro) correspond à la ligne sur laquelle on a cliqué
// comme au niveau affichage on a nos lignes numérotées de 1 à n, on retranche 1
ta.deleteRow(idx-1);
// boucle sur toutes les lignes du tableau en partant de 1
for (i=0;i<ta.tBodies[0].rows.length;i++) {
var j = i + 1;
// on remet à niveau l'identifiant de la ligne et des cellules avec l'index de la boucle
ta.tBodies[0].rows[i].id='tr' + j;
ta.tBodies[0].rows[i].cells[0].id='td' + j;
ta.tBodies[0].rows[i].cells[1].id='tdL' + j;
// dans la première cellule on remet à niveau le texte affiché et les identifiants des objets input
// sans oublier de récupérer les informations qui auraient pu être saisies dans les input
//
//
// exemple de suppression
// 'Fichier n° ' + j + '<input type="text" id="iA' + j + '" value="' + ins[0].value + '"><input type="text" id="iB' + j + '" value="' + ins[1].value + '">'
//
var ins = ta.tBodies[0].rows[i].cells[0].getElementsByTagName('input');
ta.tBodies[0].rows[i].cells[0].innerHTML = '<table border="0" cellspacing="0" cellpadding="0" style="font-size:12px; color:#999999;">'
+'<tr>'
+'<td width="60" align="left" valign="top" style="border-right:1px dashed #999999;">Fichier n° ' + j + '<br><br><a id="btn_del' + j + '" title="Supprimer ce fichier" style="color:#003366; cursor:hand;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';" onclick="delRow(\'table0\',' + idx + ');">Supprimer</a></td>'
+'<td align="center" valign="middle" width="140" height="140" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; padding:5px;"><img src="http://intranet.sbi-international.com/images/Empty_folder_128.png" width="138" height="138" style="border:1px dashed #999999;;"><br><br><a title="Modifier ce fichier" style="color:#003366; cursor:hand; font-size:16px;" onMouseOver="this.style.color=\'#FF0000\';" onMouseOut="this.style.color=\'#003366\';">Modifier</a><br><br></td>'
+'<td align="left" valign="top" style="border-top:1px dashed #999999; border-bottom:1px dashed #999999; border-right:1px dashed #999999; padding:5px;"><u>Titre du fichier:</u><br><input name="txtTitre" id="iA' + j + '" value="' + ins[0].value + '" type="text" size="92" maxlength="90"><br><u>Description du fichier:</u><br><textarea name="txtContenu" id="iB' + j + '" cols="70" rows="8"></textarea><br><input name="txtImgLink" type="text"></td>'
+'</tr><tr><td colspan="3" height="20"></td></tr></table>';
// dans la seconde cellule, on remet à niveau les identifiants des objets img
ta.tBodies[0].rows[i].cells[1].innerHTML = '<img id="btn_del' + j + '" src="http://intranet.sbi-international.com/icones/page_white_delete.png" onclick="delRow(\'table0\',' + j + ');">';
}
getel('cnt').value--;
}
</script>
</body>
</html>