使用JavaScript或jQuery將多行添加到表格

Question

如何使用jQuery或JavaScript動態添加多行到表格。

Answer 1

可以使用的append（）後，其他添加單列一個：

<table id="add"></table>    
<script type="text/javascript"> 
    function addRow() 
    { 
     var str =""; 
     for(var i=0;i<20;i++) 
     { 
      str+="<tr>"; 
      str+="<td>"+i+"</td>"; 
      str+="</tr>"; 
     } 
     $('#add').html(str); or $('#add').append(str); 
    } 
</script> 

Answer 2

這種方法將增加給定的細胞的「X」拷貝表。

function add_rows(target, count, cells) { 
    for (var i=0; i < count; i++) { 
    var row = $('<tr/>'); 
    for (var c = 0; c < cells.length; c++) { 
     row.append($('<td>'+cells[c]+'</td>')); 
    } 
    $(target).append(row); 
    } 
} 

的演示中看到http://jsfiddle.net/arLPY/。

Answer 3

得到表元素，然後創建一個新行，並隨後添加細胞基於列

 var tableID,numRows,numCells; 
     function addRow(tableID,numRows) { 

     var table = document.getElementById(tableID); 
     var i; 
     for(i=0 ; i<numRows ;i++) 
     { 

     var rowCount = table.rows.length; 

     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.name="chkbox[]"; 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount + 1; 

     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     element2.name = "txtbox[]"; 
     cell3.appendChild(element2); 
      } 


    }