jQuery créer dynamiquement table/tr/td ou etc et ajouter des attributs

Dans un exemple, je vais avoir cette structure (petit exemple):

<table id=example>
<tr class="blah test example"><td>Test1</td><td><a href="url">LINK</a>Test11</td></tr>
<tr class="blah test example"><td>Test2</td><td><a href="url">LINK</a>Test22</td></tr>
<tr class="blah test example"><td>Test3</td><td><a href="url">LINK</a>Test33</td></tr>
</table>

En jQuery je voudrais créer dynamiquement comme:

var test = "<table id=" + someIDVar + ">"
           + "<tr class=" + classOneVar 
+ classTwoVar + classThreeVar + ">"....

et etc etc... (beaucoup d'autres choses à écrire). Après, je voudrais juste ajouter:

$(".somePlaceInHtml").append(test);

Si il ya une autre façon d'écrire une telle structure de façon dynamique avec jQuery? C'est un problème pour moi parce que je suis une grosse structure, pas comme des petits comme je l'ai montré dans l'exemple. La principale raison est que je veux obtenir une meilleure lisibilité et pour moi-même et d'autres développeurs qui permettra de maintenir ce code.

OriginalL'auteur faya | 2010-03-02

  1. 17

    Pouvez-vous faire un "modèle" de votre chaîne? Si oui, puis le stocker dans une "constante" de la variable (par exemple, défini dans la portée globale), contenant des espaces réservés pour les variables réelles, comme {0}, {1} etc, comme vous l'utiliser en C#'s string.format() méthode.

    Donc, vous aurait un code comme ceci:

    var rowTemplate = "<tr><td>{0}</td><td>SomePredefinedText {1}</td></tr>";
var alternateRowTemplate = "<tr><td class='a'>{0}</td><td>SomewhatDifferent {1}</td></tr>";
 ...... somewhere deep in your code
 $("#someElement").append(
        rowTemplate.format("myvalue1", "myvalue2")
       ).append(
        alternateRowTemplate.format("myvalue3", "myvalue4")
       );

    Vous pouvez alors utiliser la chaîne de caractères.format de mise en œuvre que par cette réponse: L'équivalent de la Chaîne.format en jQuery

    OriginalL'auteur naivists

  2. 22

    Voici un exemple simplifié:

      $(function() {
    var tbl = $('<table></table>').attr({ id: "bob" });
    var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(tbl);
    $('<td></td>').text("text1").appendTo(row);
    $('<td></td>').text("Test22").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);        
    tbl.appendTo($(".somePlaceInHtml"));        
  });

    Enrouler la ligne part dans une boucle, remplacer avec des variables et il est au moins plus facile à maintenir/lire à mon avis, mais je suis habitué à jQuery, votre kilométrage peut varier, juste une option.

    Une note de côté, puisque c'est à l'aide de .text() partout, il aide à prévenir les attaques de script entre sites au sein de votre sortie.

    OriginalL'auteur Nick Craver

  3. 1

    Vous pouvez créer un StringBuilder, un peu comme celui en C#. Voici un extrait de a eu de la Telerik Extensions pour ASP.NET MVC:

    $.stringBuilder = function() {
    this.buffer = [];
};

$.stringBuilder.prototype = {

    cat: function(what) {
        this.buffer.push(what);
        return this;
    },

    string: function() {
        return this.buffer.join('');
    }
};

    De cette façon, vous pouvez avoir le code suivant:

    var html = new $.stringBuilder();
for (var i in data)
    html.cat("<tr><td>").cat(i).cat("</td><td></tr>");

$('#element').append(html.string());

    L'avantage de cette approche est que vous aurez vite concaténation (tableau joint en IE6), et vous pouvez prolonger l'objet avec d'autres fonctions utiles (par exemple, catIf qui prend une expression booléenne, ou rep qui se répète d'une chaîne donnée plusieurs fois).

    Tableau des jointures ont été le plus rapide dans IE6. Dans actuelle des navigateurs, la vitesse est d'environ le même - parfois de concaténation de chaîne est plus rapide, parfois tableau de rejoindre. Voir mes repères ici: tips.naivist.net/2010/01/19/...
    remarque prises! merci - et voici encore un article que j'ai trouvé sur le sujet: james.padolsey.com/javascript/... - semble que la jointure est le meilleur 😉

    OriginalL'auteur Alex Gyoshev

  4. 1

    Ou vous pouvez au lieu de concaténer des chaînes si faire usage de la tableau.rejoindre fonction. 

        for(var i=0;i<arr.length;i++)
    {
      arr[i] = "<tr>" + sth + "</tr>";       
    }

node.innerHTML = arr.join('');

    OriginalL'auteur poo

  5. -2
    window.onload = function(){
    var btn = document.createElement("button");
    btn.setAttribute("id", "submit_bttn");
    btn.style.width = 125 + "px";
    btn.style.height = 50 + "px";
    btn.innerHTML = "Submit";
    document.body.appendChild(btn);

    var x = document.getElementById("submit_bttn");
    x.onclick = function(){
        alert("hi");
    }
}
    Jquery n'est pas utilisé du tout.
    Golak, bienvenue. Un texte descriptif de votre code serait sympa!

    OriginalL'auteur Golak Jena