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


    }