Discussion :

[Sanceray3]

Bonjour à tous

Voilà je vous explique mon problème. J’ai crée une fonction JavaScript qui me permet d’ajouter une nouvelle ligne à un tableau de saisies dès que toutes les lignes sont renseignées, via un événement onchange sur une zone de saisie.

Pour cela je procède de la manière suivante (extrait code fonction js ajout ligne) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
….
        var fgh=document.forms["formu"].elements["ithnbmodrecr"].value;
        cptLigne=fgh*1+1; // compteur général pour les lignes ajoutées
 
        var tbl = document.getElementById('tabBody');
        var lastRow = tbl.rows.length;
        document.forms["formu"].elements["ithnbmodrecr"].value=lastRow;
        var essai3 = 0;
        var essai3 =document.forms["formu"].elements["ithnbmodrecr"].value;
        chaine="<tr height='35'>\n";
 
…..
       cptLigne++;
 
        if (document.all)
        {
        document.getElementById(idTableau).insertAdjacentHTML('beforeEnd',chaine);
        }
 
        else if (document.createRange)
        {
        var range = document.createRange();
        range.setStartAfter(document.getElementById(idTableau).lastChild);
        var docFrag = range.createContextualFragment(chaine);
        document.getElementById(idTableau).appendChild(docFrag);
        }
 
……

La déclaration de mon tableau dans mon body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
….
<table id='tab' border='0' width='90%' cellspacing='0' cellpadding='0' height='21' align='middle' >
<tbody id='tabBody'>
……

Tout ça marche très bien sous Firefox mais pas sous IE, qui me retourne un message « Élément cible non valide pour cette opération. » pour la ligne 80 qui correspond à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(idTableau).insertAdjacentHTML('beforeEnd',chaine);

Je ne vois vraiment pas où se trouve mon problème…. J’ai essayé tout un tas de choses par rapport à des indications que j’ai trouvé à droite à gauche, mais ça n’y à rien changé.

Mon problème est que je dois montrer le développement aux futurs utilisateurs la semaine prochaine, et que ça commence à s’approcher à grande vitesse…. Je commence donc à être vraiment dans la mer*****

Si quelqu’un pouvait m’aider à dépatouiller ce petit bout de code, ça serait vraiment sympa de votre part.

Merci par avance pour votre aide et vos indications !

[Djakisback]

Salut,
bon je suis pas sur de ce que je vais dire mais allons-y gaiement ^^
Si j'ai bien compris, ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(idTableau).insertAdjacentHTML('beforeEnd',chaine);

tu essaies d'ajouter un <tr> entre </tbody> et </table>.
Donc déjà c'est pas au bon endroit, en plus :
note de la MSDN :

Note When using Dynamic HTML (DHTML) to create a document, you can create objects and set the innerText or innerHTML property of the object. However, because of the specific structure required by tables, the innerText and innerHTML properties of the table and tr objects are read-only.

Donc à vérifier mais insertAdjacentHTML ne doit à priori pas fonctionner sur un table. Tu peux tenter sur le tbody directement ca marchera peut-être.

Pour info y a plus simple (IE6/FF2) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function addRowToTable(tbodyId, cellContent)	{
	var tbody = document.getElementById(tbodyId);
	// Création d'un élément ligne
	row = document.createElement("tr");
	// Création d'un élément colonne
	col = document.createElement("td");
	// Définition d'un attribut
	col.setAttribute("height", "35");
	// Ajout du texte dans la cellule
	col.innerHTML = cellContent;
	// Ajout de la colonne dans la ligne
	row.appendChild(col);
	// Ajout de la ligne au table
	tbody.appendChild(row);
}
</script>
 
<p onClick="addRowToTable('tab', '<p>tret ert <em>er</em> ter ert er</p>');">Add</p>
 
<table border="1">
<tbody id="tab">
</tbody>
</table>

Bye

[Sanceray3]

Impeccable, c'est exactement ce qu'il me fallait ! Grand, grand merci ! Tu me sauves la mise ! J'ai juste eu à intégrer ma chaine dans le "col.innerHTML", et ça passe bien sous FF et IE !

Encore merci à toi !