jQuery dynamisch Tabelle/tr/td oder usw. erstellen und Attribute

Question

In einem Beispiel anhängen ich diese Struktur habe (kleines Beispiel):

<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> 

In jQuery würde ich es schaffen dynamisch wie:

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

und etc etc ... (viele andere Sachen zu schreiben). Nach dem ich es einfach anhängen würde:

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

Also gibt es eine andere Möglichkeit, eine solche Struktur dynamisch mit jQuery zu schreiben? Das ist ein Problem für mich, weil ich eine große Struktur habe, nicht so klein, wie ich im Beispiel gezeigt habe. Der Hauptgrund ist, dass ich bessere Lesbarkeit für mich und andere Entwickler bekommen möchte, die diesen Code beibehalten.

Answer 1

Können Sie eine "Vorlage" aus Ihrer Zeichenfolge erstellen? Wenn ja, dann speichere es in einer "konstanten" Variablen (z. B. im globalen Gültigkeitsbereich definiert), die Platzhalter für tatsächliche Variablen wie {0}, {1} usw. enthält, so wie du es in C# string.format() verwenden würdest.

So würden Sie Code wie dieses:

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") 
     ); 

Sie würden dann die string.format Implementierung verwenden gemäß dieser Antwort: Equivalent of String.format in jQuery

Answer 2

Hier ist ein vereinfachtes Beispiel:

$(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"));   
    }); 

Wickeln Sie den Row-Teil in eine Schleife, ersetzen Sie sie durch Variablen, und es ist meiner Meinung nach einfacher zu warten/zu lesen, aber ich bin an jQuery gewöhnt, so dass Ihre Laufleistung nur variieren kann eine Option.

Eine Randnotiz, da dies .text() überall verwendet, hilft es Cross-Site-Scripting-Angriffe innerhalb Ihrer Ausgabe zu verhindern.

Answer 3

Sie könnten einen StringBuilder erstellen, ähnlich wie in C#. Hier ist ein Ausschnitt nahm von Telerik Extensions for ASP.NET MVC:

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

$.stringBuilder.prototype = { 

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

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

Auf diese Weise können Sie den folgenden Code haben:

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

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

Der Vorteil dieses Ansatzes ist, dass Sie schnell Verkettung haben werden (Array schließt sich eine bessere Leistung unter IE6), und Sie könnten das Objekt mit einer anderen nützlichen Funktion erweitern (zB catIf, die einen booleschen Ausdruck benötigt, oder rep, die eine gegebene Zeichenkette mehrmals wiederholt).

Answer 4

Oder Sie könnten anstelle der Verkettung von Strings zusammen verwenden Sie die array.join Funktion.

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

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

Answer 5

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"); 
    } 
}