Dupliquer une ligne d'un tableau html javascript DOM

Bonjour,

voici mon problème :
Je voudrais copier une ligne d'un tableau html (celà fonctionne sous Mozilla, Opera, Safari, IE8 mais pas sous IE6 et IE7)

image permettant d'appeler la fonction :

<span class="ValeurLabel"><img style="cursor: pointer;" src="../../images/IconMiniAjouter.png" title="Ajouter une date importante" onclick="CopyRow('DateImportantes','RowToCopy');"></span>


<table id="DateImportantes" style="width: 875px; margin-bottom: 20px; text-align: center;">
<tr>
<th style="width: 100px;">Libellé</th>
<th style="width: 50px;">Jour</th>
<th style="width: 75px;">Mois</th>
<th style="width: 50px;">Année</th>
<th style="width: 100px;">Message</th>
<th style="width: 175px;">Options</th>
</tr>

<tr id="RowToCopy" style="display: none;">
<td><input name="libelle" type="text"></td>
<td><select name="jour"><option value="00">0</option><option value="01">1</option> </select></td>
<td><select name="mois"><option value="0">0</option><option value="01">Janvier</option></select></td>
<td><input name="annee" size="4" maxlength="4" type="text"></td>
<td><input value="Message" onclick="lightbox()" type="button"></td>
<td><input value="Valider" onclick="" type="button"> &nbsp; <input value="Supprimer" type="button"></td>
</tr>
</table>

la fonction javascript :

function CopyRow(IdTablo,IdRowToCopy)
{
CptTableRow = 1

ContentRow = $(IdRowToCopy).childElements();

NbTd = ContentRow.length;

var row = document.createElement("TR");

row.className = "TableRow0";

row.id = "TableRow-"+CptTableRow;

for(var i=0;i<=NbTd-1;i++) // -1 pour enlever le submit
{
var cell = document.createElement("TD");

cell.innerHTML = $(ContentRow[i]).innerHTML;

cell.id = "NewTd"+i;

row.appendChild(cell);
}

document.getElementById(IdTablo).appendChild(row);

}

Merci pour votre aide.

Bonjour,

avec IE7 et précédents,
la balise <tbody> entre <table> et <tr>
est obligatoire si on utilise le DOM tel
que vous le faites.

perso j'utilise plutôt insertRow et insertCell
ça me semble bien plus simple, mais ce n'est que
mon avis etr ça ne fait pas le moine.

Cordialement [mon Site] [M'écrire] Bul

Bonjour,

Je connais insertRow et insertCell cependant pour une question d'esthétique et de pratique je dois faire des modifications sur les cellules (id,class...) et avec la fonction que je propose celà permet de le faire, je ne sais pas si insertRow et insertCell le permettent.

Je peux préciser que :

ContentRow = $(IdRowToCopy).childElements();

alert(ContentRow)

va retourner dans le cas où celà fonctionne que c'est objet html de type tableau, pour IE 6 et 7 uniquement un objet.


Merci en tout cas.

Merci pour ton aide je teste le tbody et je te dis si ça fonctionne.

Merveilleux, merci, je remets le code du tableau avec le tbody et le changement d'id de réference pour la duplication.

<table style="width: 875px; margin-bottom: 20px; text-align: center;">
<tbody id="DateImportantes">
<tr>
<th style="width: 100px;">Libellé</th>
<th style="width: 50px;">Jour</th>
<th style="width: 75px;">Mois</th>
<th style="width: 50px;">Année</th>
<th style="width: 100px;">Message</th>
<th style="width: 175px;">Options</th>
</tr>

<tr id="RowToCopy" style="display: none;">
<td><input name="libelle" type="text"></td>
<td><select name="jour"><option value="00">0</option><option value="01">1</option> </select></td>
<td><select name="mois"><option value="0">0</option><option value="01">Janvier</option></select></td>
<td><input name="annee" size="4" maxlength="4" type="text"></td>
<td><input value="Message" onclick="lightbox()" type="button"></td>
<td><input value="Valider" onclick="" type="button"> &nbsp; <input value="Supprimer" type="button"></td>
</tr>
</tbody>
</table>