2010-09-17 11 views
1

J'essaie d'insérer des lignes dans une table html avec javascript. J'ai créé la table et peut ajouter des lignes avec succès en cliquant sur un bouton. Cependant, je veux pouvoir remplir les lignes avec des éléments de plusieurs tableaux en charge. Le bouton est juste pour s'assurer que les lignes sont ajoutées.Ajout de lignes dans le tableau HTML en utilisant javascript

<html> 
<input type="button" value="Add row" onclick="javascript:appendRow()"  class="append_row"/> 
<br/><br/></p> 
<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<td>Name</td> 
<td>Age</td> 
<td>Sex</td> 
</tr> 

</table> 
<p></center></p> 

<script type="text/javascript" language="javascript"> 
function appendRow(){ 


var names = ["Paul", "Mike", "Linda"]; 
var ages = ["16", "23", "44"]; 
var male_female = ["M", "M", "F"]; 
var tbl = document.getElementById('my_table'); // table reference 
// append table row 
var row = tbl.insertRow(tbl.rows.length); 

// insert table cells to the new row 
    var row = tbl.insertRow(); 

for(var i=0;i<tbl.rows[0].cells.length;i++) 
    createCell(row.insertCell(i), i, 'row'); 

} 

function createCell(cell, text, style){ 
var div = document.createElement('div'); // create DIV element 
var txt = document.createTextNode(text); // create text node 
div.appendChild(txt);     // append text node to the DIV 
div.setAttribute('class', style);  // set DIV class attribute 
div.setAttribute('className', style); // set DIV class attribute for IE (?!) 
cell.appendChild(div);     // append DIV to the table cell 
} 
</script> 
<style> 
.row{background-color:#FFD6D6;width:43px;margin:3px;} 
.col{background-color:#D6FFD6;width:43px;margin:3px;} 
    table#my_table{border-collapse:collapse;} 
    table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font- size:10pt;text-align:center;padding:0;} 
    .append_row{background-color:#FFD6D6;border:1px #ccc solid;} 
    .append_column{background-color:#D6FFD6;border:1px #ccc solid;} 
    .delete{background-color:#eee;border:1px #ccc solid;} 
    </style> 
    </html> 
+1

re l'appel 'de setAttribute' et IE bidouille: ne pas utiliser setAttribute'' getAttribute'/'dans un document HTML, pour cette raison. Mieux vaut s'en tenir aux propriétés HTML DOM niveau 1 comme 'div.className = style'. – bobince

Répondre

2

Dans votre boucle, essayer quelque chose comme:

var j = tbl.rows.length - 1; 
for (var i=0;i<tbl.rows[0].cells.length;i++) { 
    var cell_text = ''; 
    if (i == 0) { 
    cell_text = name[j]; 
    } else if (i == 1) { 
    cell_text = ages[j]; 
    } else if (i == 2) { 
    cell_text = male_female[j]; 
    } 
    createCell(row.insertCell(i), cell_text, 'row'); 

} 
+0

Semble fonctionner pour la plupart. Cela commence avec le 2ème élément du tableau, mais met tout ce qu'il doit être. Merci pour l'aide. Y at-il un moyen de le faire créer un nombre de lignes en fonction du nombre d'éléments dans le tableau ou la longueur? Je vais utiliser ceci avec des tableaux de longueur inconnue et j'en ai besoin pour peupler en conséquence. – cameron213

+0

Je suppose que vous avez besoin de j = tbl.rows.length - 2 pour représenter la ligne d'en-tête. Vous pouvez utiliser une boucle externe for: pour (var j = 0; j MattSmith

1

Vous avez oublié le tag "corps" dans la syntaxe HTML. Vous pouvez appeler votre fonction dans la variable onLoad, elle sera appelée après la page chargée.

+0

Ouais j'ai laissé ce code pour le moment jusqu'à ce que je vois que ça fonctionne réellement. Je cherche le code pour mettre ces éléments dans les rangées. – cameron213

Questions connexes