it-swarm-ja.tech

テーブル行のクローンを作成し、JavaScriptでテーブルに追加します

JavaScriptでは、行をテーブルに動的に追加するにはどうすればよいですか? JavaScriptイベントで、同様の行を作成し、テーブルに追加します。

25
Shyju

JQueryを使用したくない場合は、cloneNode()createElement()appendChild()など、使用できる簡単な関数がいくつかあります。 cloneまたはcreateメソッドを使用して、テーブルの最後に行を追加する簡単なデモを次に示します。 IE8およびFF3.5でテスト済み。

<html>

<head>
  <script type="text/javascript">
    function cloneRow() {
      var row = document.getElementById("rowToClone"); // find row to copy
      var table = document.getElementById("tableToModify"); // find table to append to
      var clone = row.cloneNode(true); // copy children too
      clone.id = "newID"; // change id or other attributes/contents
      table.appendChild(clone); // add new row to end of table
    }

    function createRow() {
      var row = document.createElement('tr'); // create row node
      var col = document.createElement('td'); // create column node
      var col2 = document.createElement('td'); // create second column node
      row.appendChild(col); // append first column to row
      row.appendChild(col2); // append second column to row
      col.innerHTML = "qwe"; // put data in first column
      col2.innerHTML = "rty"; // put data in second column
      var table = document.getElementById("tableToModify"); // find table to append to
      table.appendChild(row); // append row to table
    }
  </script>
</head>

<body>
  <input type="button" onclick="cloneRow()" value="Clone Row" />
  <input type="button" onclick="createRow()" value="Create Row" />
  <table>
    <tbody id="tableToModify">
      <tr id="rowToClone">
        <td>foo</td>
        <td>bar</td>
      </tr>
    </tbody>
  </table>
</body>

</html>
39
SimonDever

ソースを利用して、今日あらゆる種類の検索を試みました: http://www.mredkj.com/tutorials/tablebasics3.html および http://www.mredkj.com/tutorials /tableaddcolumn.html

ここに私の論理研究の結果があります、それは今働いています

    function addRow(id)
    { var x=document.getElementById(id).tBodies[0];  //get the table
      var node=t.rows[0].cloneNode(true);    //clone the previous node or row
      x.appendChild(node);   //add the node or row to the table
    }  

    function delRow(id)
    { var x=document.getElementById(id).tBodies[0]; //get the table
      x.deleteRow(1); //delete the last row
    }

注1:私のテーブルには、テーブル行(tr)ごとにテキストボックス+ラベルのあるセルが含まれていました。
注2:連続して、ラベル+テキストボックスを持つ複数の(td)がありました

12
student

私はその古い投稿を知っていますが、次のコードは他の読者に役立つと感じています

  $("button").click(function () {
                $("#DataRow").clone().appendTo("#mainTable");
            });
4
user6767235