javascript - 使用 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);
          }


    }