使用JavaScript或jQuery向表格添加多行

Question

如何使用jQuery或JavaScript动态添加多行到表格中。

- ѕтƒ

---

我可以使用append()或after()函数添加单行。 - ѕтƒ

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>

- THE ONLY ONE

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/了解演示。

- tjdett

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


    }

- Tushar Cse