如何創建動態表？

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>