jQuery的动态创建表/ TR/TD或等和附加属性

在我具有这种结构的例子（小例子）：jQuery的动态创建表/ TR/TD或等和附加属性

<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中我将动态地创建它像：

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

等等......（写很多其他东西）。之后，我只想追加它：

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

那么，有没有其他的方式来使用jQuery动态地写这样的结构呢？这对我来说是一个问题，因为我有一个很大的结构，而不是像我在示例中展示的那么小。主要原因是我想为自己和其他维护此代码的开发人员获得更好的可读性。

来源

2010-03-02 faya

你能从你的字符串中创建一个“模板”吗？如果是，然后将其存储在“恒定”变量（例如，在全球范围内所定义的），含占位符实际变量，如{0}，{1}等，你会在C＃的string.format()方法使用它。

所以，你将有这样的代码：

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

你会再使用的String.Format实现按这样的回答：Equivalent of String.format in jQuery

来源

2010-03-02 12:27:23 naivists

这里有一个简单的例子：

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

将行部分换成循环，用变量替换，至少在我看来更容易维护/阅读，但我习惯jQuery，所以你的里程可能会有所不同，只是一个选项。

一个侧面说明，因为这是使用.text()无处不在，它有助于防止您的输出中的跨站点脚本攻击以及。

来源

2010-03-02 12:31:59

您可以创建一个StringBuilder，很像一个在C＃。这里的一个片段从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(''); 
    } 
};

这种方式，你可以有下面的代码：

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

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

这种方法的好处是，你必须快速级联（阵列连接下有更好的表现IE6），并且可以使用其他有用的函数扩展对象（例如，catIf采用布尔表达式，或rep可重复给定的字符串几次）。

来源

2010-03-02 12:46:04

阵列连接*是*快于IE6。在目前的浏览器中，速度大致相同 - 有时字符串连接速度更快，有时数组连接。在这里看到我的基准：http://tips.naivist.net/2010/01/19/string-concatenation-versus-array-join-in-javascript/ – naivists 2010-03-02 12:52:51

笔记！谢谢 - 这里还有一篇关于这个主题的文章：http：//james.padolsey。com /的JavaScript /最快的方式来建立一个HTML字符串/ - 似乎加入是最好的;-) – 2010-03-02 13:46:05

或者你可以代替连接字符串在一起，利用array.join功能。

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

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

来源

2010-03-02 13:59:54 poo

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

来源

2012-04-06 09:56:30

Jquery没有使用。 – Tariqulazam 2012-10-26 05:33:53

戈拉克，欢迎来到SO。一些描述性的文字给你的代码会很好！ – Nippey 2012-10-26 05:34:33

jQuery的动态创建表/ TR/TD或等和附加属性

回答

相关问题