jQuery dynamicznego tworzenia stołu/TR/lub TD itp i dodać Atrybuty

Question

W przykładzie mam tej struktury (mały przykład):

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

jQuery by utworzyć dynamicznie jak:

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

itd. Itd. (Wiele innych rzeczy do napisania). Po prostu chciałbym dołączyć go:

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

Więc jest jakiś inny sposób, żeby napisać taką strukturę dynamicznie z jQuery? Jest to dla mnie problem, ponieważ mam dużą strukturę, nie tak małą, jak pokazałem w przykładzie. Głównym powodem jest to, że chcę uzyskać lepszą czytelność dla siebie i innych programistów, którzy będą utrzymywać ten kod.

Answer 1

Czy możesz utworzyć "szablon" ze swojego łańcucha? Jeśli tak, to przechowuj go w zmiennej "stałej" (np. Zdefiniowanej w zasięgu globalnym), zawierającej zmienne zastępcze dla rzeczywistych zmiennych, takich jak {0}, {1} itd., Tak jak użyłbyś go w metodzie C# string.format().

Tak, to masz kodu:

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

by następnie użyć realizacji string.Format jak na tej odpowiedzi: Equivalent of String.format in jQuery

Answer 2

Oto uproszczony przykład:

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

Zawiń część wiersza w pętlę, zamień na zmienne i przynajmniej łatwiej jest ją utrzymać/przeczytać, ale jestem przyzwyczajony do jQuery, więc twój przebieg może się różnić, po prostu opcja.

Notatka boczna, ponieważ używa się tego .text() wszędzie, pomaga to zapobiec atakom skryptów cross-site w obrębie danych wyjściowych.

Answer 3

Można utworzyć StringBuilder, podobnie jak w C#. Oto fragment wziął od 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(''); 
    } 
}; 

W ten sposób można mieć następujący kod:

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

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

Zaletą tego podejścia jest to, że będziesz mieć szybki konkatenacji (array dołącza skuteczniejsze pod IE6) i można rozszerzyć obiekt o inną użyteczną funkcję (np. catIf, która pobiera wyrażenie boolowskie, lub rep, które powtarza dany ciąg kilka razy).

Answer 4

Możesz też zamiast łączyć ze sobą łańcuchy, więc skorzystaj z funkcji array.join.

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