jQuery表格行構建器

有一種使用jQuery構建DOM的可靠方法嗎？看看這段代碼的append方法...jQuery表格行構建器

$.getJSON("api/test", function(data) { 
    $.each(data, function() { 
     $("#tests").append($('<tr><td><input type="radio" name="' + this["name"] + '"/><td>' + this["name"] + '</td><td>' + this["descr"] + '</td></tr>')); 
    }); 
});

我認爲（或至少我希望）有一個更好的辦法。你能重構這個更清晰嗎？

來源

2009-07-17 dfa

看看模板插件。

http://plugins.jquery.com/project/jquerytemplate

現在您的代碼可以像，

$.getJSON("api/test", 
    function(data) 
    { 
     var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>'); 
     $.each(data, function() 
     { 
      $("#tests").append(t, this); 
     } 
    } 
);

編輯

由於redsquare正確地指出，如果有大量的行，做DOM操作在每次迭代可能真的很慢。除非您已經對您的代碼進行了剖析，並且發現這個特定的循環是瓶頸，否則不要更改您的代碼。

如果我借用'string.Format' method from this post，你可以這樣做

$.getJSON("api/test", 
    function(data) 
    { 
     var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>'; 
     var html = []; 
     $.each(data, function() 
     { 
      html.push(template.format(this)); 
     } 
     $('#tests').append(html.join('')); 
    } 
);

編輯：Modified the string.Format function採取基於名稱的關鍵。現在，您的模板代碼可以使用{name}，{descr}，而不是使用{0}，{1}。該函數將嘗試在傳遞給函數的參數中找到具有相同名稱的屬性。

另外，請看Rick Strahl的方法，看看它是否對您更有意義。

http://www.west-wind.com/WebLog/posts/300754.aspx

來源

2009-07-17 17:12:04 SolutionYogi

+1：我喜歡它，謝謝 – dfa 2009-07-17 17:13:51

大。那麼你會接受答案嗎？ :) – SolutionYogi 2009-07-17 18:04:23

我不會追加在每個。最好使用stringbuilder或push到一個數組並使用.join（）追加一次

選擇取決於您試圖優化哪個瀏覽器。由於屏幕reflows附加到DOM是非常有創意的，因此我會盡量減少我稱爲.append的次數。

Web上有很多性能比較，詳細討論了這兩個選項的性能。一個here。陣列的

例加入

$.getJSON("api/test", 
    function(data) 
    { 
     var rowsToAppend=[]; 

     $.each(data, function() 
     { 
      rowsToAppend.push('<tr><td></td></tr>'); 
     } 

     $("#tests").append(rowsToAppend.join()); 
    } 
);

來源

2009-07-20 08:22:51 redsquare

jQuery表格行構建器

回答

相關問題