Si l'identifiant de la table est connu - donc la table peut être obtenue avec docoument.getElementById(table_id) - comment puis-je ajouter un élément TR à cette table de la manière la plus simple?quelle est la méthode la plus simple pour ajouter un TR à une table par javascript?
Le TR est la suivante:
<tr><td><span>something here..</span></td></tr>
La première utilise des méthodes DOM, et la seconde utilise le innerHTML non standard, mais largement supprted
var tr = document.createElement("tr");
var td = document.createElement("td");
var span = document.createElement("span");
var text = document.createTextNode("something here..");
span.appendChild(text);
td.appendChild(span);
tr.appendChild(td);
tbody.appendChild(tr);
OU
tbody.innerHTML += "<tr><td><span>something here..</span></td></tr>"
En utilisant jQuery:
$('#table_id > tbody').append('<tr><td><span>something here..</span></td></tr>');
Je sais que certains peuvent grincer des dents à la mention de jQuery. Y compris un cadre pour faire une seule chose est probablement exagéré. mais je trouve rarement que j'ai juste besoin de faire "juste une chose" avec javascript. La solution codée à la main consiste à créer chacun des éléments requis, puis à les ajouter dans la séquence appropriée (de l'intérieur vers l'extérieur) aux autres éléments, puis à ajouter la nouvelle ligne à la table.
que s'il utilise jquery –
+1 Selon mon expérience, jQuery n'est jamais exagéré. –
Combien de code faut-il développer avant d'utiliser un framework? J'ai écrit assez de javascript artisanal, que j'ai trouvé que commencer avec un framework est presque toujours le bon chemin. – tvanfosson
Si vous n'êtes pas opposé à l'utilisation de jQuery, vous pouvez utiliser l'un des suivants où "tblId" est l'ID de votre table et "_html" est une représentation sous forme de chaîne de votre ligne de table:
$(_html).insertAfter("#tblId tr:last");
ou
$("#tblId tr:last").after(_html);
exemple très simple:
<html>
<table id = 'test'>
<tr><td>Thanks tvanfosson!</td></tr>
</table>
</html>
<script type="text/javascript" charset="utf-8">
var table = document.getElementById('test');
table.innerHTML += '<tr><td><span>something here..</span></td></tr>';
</script>
Cela remplacera toutes les lignes existantes par une seule ligne. Probablement pas ce qui est désiré. – tvanfosson
Merci a ajouté un signe plus maintenant. – MrHus
Savez-vous pourquoi je copie coller votre code dans un fichier HTML vide et ne peut toujours pas le faire fonctionner dans IE7? – clamchoda
La méthode la plus simple, conforme aux normes et à la bibliothèque indépendante pour insérer une ligne de tableau utilise the insertRow method de l'objet de la table.
var tableRef = document.getElementById(tableID);
// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(0);
P.S. Fonctionne également dans IE6, bien qu'il puisse parfois avoir quelques bizarreries.
J'utilise cette fonction pour ajouter un groupe de lignes dans une table. C'est environ 100% plus rapide que jquery pour de gros morceaux de données. le seul inconvénient est que si vos lignes ont des balises de script intérieur d'eux, les scripts ne sera pas exécuté sur la charge dans IE
function appendRows(node, html){
var temp = document.createElement("div");
var tbody = node.parentNode;
var nextSib = node.nextSibling;
temp.innerHTML = "<table><tbody>"+html;
var rows = temp.firstChild.firstChild.childNodes;
while(rows.length){
tbody.insertBefore(rows[0], nextSib);
}
}
où le nœud est la ligne à ajouter après, et html est les lignes à ajouter
utiliser, fonctionne doucement:
var changeInnerHTMLOfMyCuteTbodyById = function (id_tbody, inner_html)
{
//preparing
var my_tbody = document.getElementById (id_tbody);
var my_table = my_tbody.parentNode;
my_table.removeChild (my_tbody);
//creating dom tree
var html = '<table style=\'display:none;\'><tbody id='+ id_tbody+'>' +
inner_html + '</tbody></table>';
var tmp_div = document.createElement ('div');
tmp_div.innerHTML = html;
document.body.appendChild (tmp_div);
//moving the tbody
my_table.appendChild (document.getElementById (id_tbody));
}
Vous pouvez faire ceci:
changeInnerHTMLOfMyCuteTbodyById('id_tbody', document.getElementById ('id_tbody').innerHTML + '<tr> ... </tr>');
Attention, une solution utilisant InnerHtml n'est pas supportée par tous les navigateurs. – clamchoda