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

JavaScriptでは、テーブルに行を動的に追加するにはどうすればよいですか？ JavaScriptイベントでは、同様の行を作成してテーブルに追加したいと考えています。テーブル行のクローンを作成し、JavaScript内のテーブルに追加する

出典

2009-11-13 Shyju

peirix：あなたが正しいです、ここでそれは "たぶん、この投稿はhttp://stackoverflow.com/questions/171027/jquery-add-table-row" " – ant

jQueryを使用しない場合は、cloneNode(),createElement()、appendChild()のようないくつかの簡単な関数を使用できます。ここでは、cloneメソッドまたはcreateメソッドを使用してテーブルの末尾に行を追加する簡単なデモンストレーションを示します。 IE8とFF3.5でテストされています。

出典

2009-11-13 11:09:15 SimonDever

<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>

は、今日の検索のすべての種類を試してみました、作られたソースの使用： 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）のラベル+テキストボックス

出典

2012-10-27 14:20:36 student

に役立ちますか？ –

私はそのに古いポストを知っているが、私は次のコードは、他の読者を助けることができると感じていたこと

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

出典

2016-10-01 17:23:00

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

答えて

関連する問題