Ajouter du contenu à une ligne de tableau (<TR>) avec du javascript?

J'ai un tableau comme suit:

<table>
 <tr>
   <td>col 1</td><td>col2</td>
 </tr>
 <tr id="insert">
   <td>field</td><td>Field 2</td>
 </tr>
 <tr>
   <td>another field</td><td>one more field</td>
 </tr>
</table>

Maintenant la question est que j'ai besoin d'insérer dynamiquement de nouvelles lignes APRÈS la ligne du milieu (id = insert). J'ai un code javascript personnalisé fonction pour insérer elementsAFTER un élément à l'aide d'un insertBefore appel sur l'élément suivant.

Les nouvelles lignes de créer avec succès en utilisant le code javascript suivant:

var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);

Cependant, la nouvelle ligne refuse d'accepter une simple mise en forme html à l'aide de la innerHTML. La sortie finale de la nouvelle ligne ressemble à quelque chose comme:

<tr>test</tr>

Vous voir il ne veut pas à la sortie de la j'ai spécifié. Le script en lui-même est beaucoup plus complexe et donc, malheureusement, ajoutant manuellement chaque à l'aide d'un appendChild ou fonction similaire serait beaucoup trop long et probablement plutôt gourmandes en ressources. Est-il de toute façon je peux juste ajouter un "morceau de code html" à cette ligne du tableau et dans ce morceau de définir les colonnes de la table?

Je suis perplexe, toute aide est très appréciée.

InformationsquelleAutor Michael D | 2011-01-25
  1. 7

    Vous pouvez utiliser le natif insertCell() méthode pour insérer des cellules.

    Donner à ceci un essai:

    Exemple: http://jsfiddle.net/VzTJa/

    var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

    ou vous pouvez l'accomplir sans votre insertAfter() fonction à l'aide de insertRow() ainsi.

    Exemple: http://jsfiddle.net/VzTJa/1/

    var insert = document.getElementById("insert");
var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

    Donner cette solution de contournement d'essayer:

    Exemple: http://jsfiddle.net/VzTJa/2/

    var temp = '<table><tbody><tr>';
var close_temp = '</tr></tbody></table>';
var temp_div = document.createElement('div');


var html_to_insert = '<td>tester</td><td>tester</td>';

temp_div.innerHTML = temp + html_to_insert + close_temp;
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild);

temp_div.removeChild(temp_div.firstChild);

    Fondamentalement crée un couple de chaînes de caractères représentant l'ouverture et la fermeture des balises d'une table. Vous concaténer avec votre contenu, et de le définir comme le innerHTMl temporaire div, puis extraction de la ligne que vous voulez, et de faire une .appendChild().

    Il peut y avoir une meilleure façon, ou vous pouvez trouver un moyen d'améliorer celui-ci.

    Je suis venu avec cette après jetant un coup d'oeil à une solution en cet article d'un gars qui apparemment travaillé sur IE et est en partie responsable de l'analyseur.

    • Vous avez raison, j'aurais probablement pu ajouter chaque cellule de façon indépendante, mais comme je l'ai mentionné, le HTML est beaucoup plus complexe et qu'il serait tellement plus facile si je pouvais l'ajouter en une seule fois. Le code HTML qui doit être inséré est en fait retourné par un script PHP, donc j'aurais besoin de modifier que trop à revenir chaque cellule séparément qui est une autre cause pour des maux de tête.
    • Je vois. Si je me souviens bien, il ya quelques problèmes avec innerHTML sur table éléments (dans certains navigateurs). Je ne me souviens pas de ce que la solution de contournement est, mais je vais voir si je peux le trouver.
    • Je pense que j'ai une solution pour vous. Je vais l'ajouter dans une minute. Je vais aussi poster un article du gars de chez MS qui, apparemment, est mis en œuvre innerHTML dans IE. Lecture intéressante. La solution est basée sur l'examen rapide que j'ai pris à son. Vous préférez peut-être la sienne.
    • dw: Merci pour votre aide! Cette solution fonctionne! Je me demande comment je n'ai jamais pensé de moi-même. Apprécie vraiment votre travail dur, et pensé qu'il était utile de mentionner que je peux aussi ajouter un peu plus de lignes de la table avec cette logique qui, avant cela j'envisage de mépris à cause de la complexité. Encore une fois, merci!
    • Vous êtes les bienvenus. Heureux, il a travaillé. :o)
    • document.createElement ("tr") vs insertRow qui est le meilleur de l'insertion de 1000 lignes

    InformationsquelleAutor user113716
  2. 2

    Si vous pouvez utiliser jQuery, essayez la méthode append à partir d'elle. jQuery ajouter la référence

    Si vous trouvez des performances d'être un problème, vous trouverez peut-être une amélioration par la construction de la dynamique DOM vous souhaitez ajouter en javascript avant ajoutant à la réelle DOM HTML élément qui va le rendre visible. Cela permet de garder votre numéro de repeint à un minimum.

    • jQuery EST une option, cependant, c'est un script que j'utilise, et je voudrais vraiment le faire avec javascript natif plutôt que d'importer une bibliothèque pour une tâche simple. Je donnerai, c'est un coup si rien d'autre ne fonctionne.
    • Ce code devrait fonctionner pour vous: document.getElementById("insert").parentNode.insertBefore(new_row, document.getElementById("insert").nextSibling); Il peut paraître étrange, mais donnez-lui un coup de feu et je pense que vous serez actuellement surpris.
    InformationsquelleAutor nybbler