如何创建动态表？

Question

有什么办法来创建使用jQuery动态HTML表格元素。

在这个表我想补充了TD内部元素作为锚标记。

Answer 1

你可以做这样的事情

使用append功能

$("#divID").append("<table><tr><td><a href='3#'>Click me</a></td></tr></table>"); 

或只是创建表格标记为字符串，并使用

html()

追加它里面容器

var strTable = "<table><tr><td><a href='#'>Click</a></td></tr></table>"; 

$("#div1").html(strTable.toString()); 

如果你有更复杂的标记，然后使用数组

var arrTableMarkup = new Array(); 
arrTableMarkup.push ("<table>"); 
arrTableMarkup.push ( "<tr>"); 
arrTableMarkup.push (  "<td>"); 
arrTableMarkup.push (   "<a id='anch1' href='#'>Click</a>"); 
arrTableMarkup.push (  "</td>"); 
arrTableMarkup.push (  "</tr>"); 
arrTableMarkup.push ("</table>"); 

$("#div1").html(arrTableMarkup.join('')); 

编辑

如果您需要添加一个onclick事件，那么你可以指定锚标记的ID，然后使用live方法来分配事件。

$("#anch1").live ("click" , function() { EventHandlerFunction() }); 

Answer 2

最简单的（也许最快）的方法是从HTML做到这一点：

var table = $('<table><tr><td><a href="#">Hello World!</a></td></tr></table>'); 

做table.find('a')会给你的锚，如果需要的话。

Answer 3

呼叫createDynamicTable(tbody, rows, cols)

<script typr="text/javascript"> 
function createDynamicTable(tbody, rows, cols) 
{ 
    if (tbody == null || tbody.length < 1)return; 

    for (var r = 1; r <= rows; r++) { 
      var trow = $("<tr>"); 
     for (var c = 1; c <= cols; c++) { 
      var input = $("<a />"); 
      $("<td>") 
        .addClass("tableCell") 
        .append(input) 
        .data("col", c) 
        .appendTo(trow); 
     } 
     trow.appendTo(tbody); 
    } 
} 
</script>