Ajouter une ligne dans une table

Version imprimable

Bonjour,.

Dans mon body html je déclare une table :
Code:

1 2 3 4 5 6 7 8 <table border=1> <tr> <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> </tr> </table>
Dans une partie de mon programme j'utilise le Javascript. Dans cette partie j'aimerai AJOUTER une ligne dans le Tableau créer. Je me suis pris de plusieurs facon ss grand succés
Pouvez-vous m'aidez svp, en me donnant par exemple un exemple
^^

Merci

07/12/2008, 15h49
le_chomeur

cf la faq : http://javascript.developpez.com/faq...ble#AjoutLigne

Bonjour le_chomeur,

merci pr ton lien
Code:

1 2 3 4 5 6 7 8 9 10 11 function AddRow(){ alert('-1'); var newRow = document.getElementById("side_bar").insertRow(-1); alert('0'); var newCell = newRow.insertCell(0); alert('1'); newCell.innerHTML = '[nouvelle cellule 0]'; alert('2'); newCell = newRow.insertCell(1); newCell.innerHTML = '[nouvelle cellule 1]'; }
J'ai l'impression que mon script n'apprécie pas le ".insertRow(-1)" car avec le code ne s'éxécute pas et ss sa s'éxécute. De plus, lorsque je l'enléve le prog. ne s'exécute plus , de tt facon, à partir de
var newCell = newRow.insertCell(0);

Merci

Salut,
Voilà j'ai trouvé un code sur internet pour ajouter une ligne :

Code:

1
2
3
4
5
6
7
8
    var tableau=document.getElementById("ma_table");
    var ligne=document.createElement("tr");
    var col=document.createElement("td");
    col.setAttribute("colspan", "4");
    var test=document.createTextNode("nouvelle ligne");
    tableau.appendChild(ligne);
    ligne.appendChild(col);
    col.appendChild(test);

Mais je n'arrive pas du tout à ajouter un lien sur ligne, j'ai essayé plien de truc
par exemple :
function createLigne(){

Code:

1
2
3
4
5
6
7
8
9
10
	var tableau=document.getElementById("side_bar");
	var ligne=document.createElement("tr");
	var col=document.createElement("td");
	col.setAttribute("colspan", "4");
	var test=document.createTextNode(<a href="URL"> ' +" name" + '</a>);
alert('0');
	tableau.appendChild(ligne);
	ligne.appendChild(col);
	col.appendChild(test);
alert('1');

Mais sa ne marche pas.
Est ce que vous pourrez m'aider
Merci

08/12/2008, 09h16
Bovino
Code:

var test=document.createTextNode(<a href="URL"> ' +" name" + '</a>);

:roll: un lien n'est pas un noeud texte mais un élément HTML !
Code:

1 2 3 var test = document.createElement('a'); test.href = 'URL'; test.appendChild(document.createTextNode('name'));

Ahhhhhhhhhhhhhhh :mrgreen: Bonjour Bovino,
Je suis ravi que qq1 est trouvé la soluce,
J'ai essayé ton code et il marche parfaitement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function createLigne(){
	var tableau=document.getElementById("side_bar");
	var ligne=document.createElement("tr");
	var col=document.createElement("td");
	col.setAttribute("colspan", "4");
	var test = document.createElement('a');
test.href = 'URL';
test.appendChild(document.createTextNode('name'));
	tableau.appendChild(ligne);
	ligne.appendChild(col);
	col.appendChild(test);
}

Je voudrai l'amélioré, c.a.d. que le lien en faite renvoi non pas vers un URL mais vers une fonction situé dans le script .....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createLigne(){
	var tableau=document.getElementById("side_bar");
	var ligne=document.createElement("tr");
	var col=document.createElement("td");
	col.setAttribute("colspan", "4");
	var test = document.createElement('a');
test.href = ' "javascript:myclick(' + i + ')" ';
test.appendChild(document.createTextNode('name'));
	tableau.appendChild(ligne);
	ligne.appendChild(col);
	col.appendChild(test);
}
 
      function myclick(i) {
.............................
      }

Je ne sais pas si c'est la bonne syntaxe
test.href = "javascript:myclick(' + i + ')";
Merci bcp

08/12/2008, 10h58
Bovino
Code:

test.href = 'javascript:myclick(' + i + ')';

Suffit, solution plus élégante (pour éviter les pseudo-url) :
Code:

1 2 test.href = '#'; test.onclick = function(){myclick(i); return false}
Attention toutefois à la valeur de i !

REbonjour,
tout est parfait dans le code sa marche (..enfin presque ..) ! Le problème le plus délicat (tu as raison) est la valeur de >>>>> i <<<<<<!

En effet, lorsque je clique sur une des lignes aucun des liens ne marche. J'ai remarqué qu'en faite si j'avais 3 ligne i valait 4...... (à cause du i++)
Code:

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 function createLigneDePalmares(marker,comment){ var tableau=document.getElementById("side_bar"); var ligne=document.createElement("tr"); var col=document.createElement("td"); col.setAttribute("colspan", "4"); var test = document.createElement('a'); gmarkers[i]=marker; htmls[i]=comment; alert('htmls[i] = ' + htmls[i]); alert('gmarkers[i] = ' + gmarkers[i]); //test.href = 'javascript:myclick(' + gmarkers[i] , htmls[i] + ')'; test.href = '#'; test.onclick = function(){myclick( i ); return true} test.appendChild(document.createTextNode('name')); tableau.appendChild(ligne); ligne.appendChild(col); col.appendChild(test); i++ } function myclick(i) { alert('i = '+ i); gmarkers[i].openInfoWindowHtml(htmls[i]); //Pq il n'associe pas à chaque gmarkers[i] le htmls[i] ?? }
J'ai essayé plusieurs astuces .. mais vraiment là .... le problème du i ....
Je n'arrive pas (lorsqu'il y a plusieurs lignes ds la table) de définir le lien spécifique pour cette lignes ....

En esperant avoir été clair ...
MErci

Code:

1 2 3 test.href = '#'; test.id = 'lien' + i; test.onclick = function(){myclick(test.id); return false}
Mais le paramètre pour la fonction myclick est changé ! A prendre en compte dans le code.
Si tu veux récupérer la valeur de i :
Code:

1 2 3 4 function myclick(mon_id){ var mon_param = mon_id.replace(/\D/g,''); // Reste de ton code }

08/12/2008, 18h40
JeanDan
Excuse moi Bovino, je crois que je n'était pas assez clair.

En effet quand je voulais dire :
"Je n'arrive pas (lorsqu'il y a plusieurs lignes ds la table) de définir le lien spécifique pour cette lignes ...."
Je sous entendé par "lien" l'action click et non pas un URL. C'est à dire que je n'arrive pas à définir pour une ligne (de la table) son action click.
Car j'ai l'impression qu'il n'arrive pas à associer pour chaque ligne son [I]gmarkers avec son [I]htmls
Code:

1 2 3 4 5 6 function myclick(i) { alert('i = '+ i); gmarkers[i].openInfoWindowHtml(htmls[i]); //Pq il n'associe pas à chaque gmarkers[i] le htmls[i] ?? }
Exemple :
J'ai 3 lignes dans la table :
1° ligne i=0
2° ligne i=1
3° ligne i=2
le programme est passé 3 fois par i++; donc i=0+1+1+1=3
lorsque je clique sur une ligne, de la table, i=3 CE QUI FAIT QUE Rien ne se passe car aucune action a été affecté pour i=3. Lorsque je clique sur une de ces lignes, j'ai toujours i=3 ......

function myclick(i) {
alert('i = '+ i);
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

J'espère que vous avez saisie le problème
Cordialement,
09/12/2008, 08h14
Bovino

Oui, c'est bien pour cela que je t'ai proposé comme solution d'affecter un id spécifique à chaque passage dans la boucle ('lien'+i) puis d'affecter le onclick avec une référence à cet id plutôt qu'à l'indice.
09/12/2008, 08h42
JeanDan
Bonjour Bovino,
Merci pour ton code,
Tout marche, enfin, parfaitement ! (merci)
Code de la fct click :
Code:

1 2 3 4 function myclick(mon_id) { var mon_param = mon_id.replace(/\D/g,''); gmarkers[ mon_param].openInfoWindowHtml(htmls[ mon_param]); }
Pourrais-tu m'expliquer, stp, ce qui signifie(/\D/g,'')
Si je veux "nettoyer" (effecer les lignes pour remettre d'autre ligne) de la table, il suffit que je mette l'indice i à 0.

Merci
09/12/2008, 08h55
Bovino

Citation:

Pourrais-tu m'expliquer, stp, ce qui signifie(/\D/g,'')

Pour pouvoir créer un id "correct", il faut que celui-ci commence par une lettre, c'est pour cela que j'ai rajouté 'lien' à tes id. Ceci dit, j'ai pensé que ce que tu souhaitais récupérer dans ta fonction est juste l'indice associé, donc, le

Code:

mon_id.replace(/\D/g,'');

remplace tous les caractères qui ne sont pas des chiffres (le /\D/g) par rien ( '' ) et tu obtiens donc ton indice initial.
09/12/2008, 09h48
JeanDan
D'accord pour les explications ! merci

AHAHh la bonne blague
Je viens de remarqué un truc : Avec Firefox tout fonctionne correctement mais avec IE tout s'éxécute mais aucuns ligne ne s'affiche dans la table .....
J'ai trouvé un code (qui marche sous IE et firefox) pour ajouter une ligne;
Code:

1 2 3 var newRow = document.getElementById('side_bar').insertRow(-1); var newCell = newRow.insertCell(i); newCell.innerHTML = 'name';
Mais c'est toujours la même histoire : ici c'est un noeud texte alors qu'on veux un élément HTML

Serait tu faire un élément HTML adapté à ce code (pour qu'il soit compatible à IE)

Merci infiniment !