JavaScriptでは、テーブルに行を動的に追加するにはどうすればよいですか? JavaScriptイベントでは、同様の行を作成してテーブルに追加したいと考えています。テーブル行のクローンを作成し、JavaScript内のテーブルに追加する
19
A
答えて
32
jQueryを使用しない場合は、cloneNode()
,createElement()
、appendChild()
のようないくつかの簡単な関数を使用できます。ここでは、cloneメソッドまたはcreateメソッドを使用してテーブルの末尾に行を追加する簡単なデモンストレーションを示します。 IE8とFF3.5でテストされています。
11
<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>
は、それが今
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)のラベル+テキストボックス
+0
に役立ちますか? –
3
私はそのに古いポストを知っているが、私は次のコードは、他の読者を助けることができると感じていたこと
$("button").click(function() {
$("#DataRow").clone().appendTo("#mainTable");
});
関連する問題
- 1. Javascript Javascriptにテーブルを追加するテーブルを生成
- 2. 複数のテーブルの内容を別のテーブルに追加する
- 3. JavaScriptテーブルに別の行を追加する-addRow関数
- 4. テーブル行にフォームを追加
- 5. テーブルの行に追加する
- 6. (Oracle)テーブルの作成後に制約を追加する
- 7. テーブル行の追加をアニメーション化する(JavaScript + jQuery)
- 8. テーブルに行を追加する
- 9. MS Accessテーブルに行を追加する
- 10. jQueryのテンプレート - 既存の行をテーブル要素の内部テーブルの行を追加し、クリアする最初の
- 11. railsテーブルに新しい行を追加
- 12. 実行時にテーブルに行を追加
- 13. テキストファイルからテーブルを作成してカラムを追加する
- 14. '既に作成されたデータベース'にテーブルを追加する
- 15. Rails 3.1のテーブルに新しいレコードを追加するメソッドを作成する
- 16. ストアドプロシージャで作成されたテーブルのインデックスを追加する
- 17. mysqlストアドプロシージャ内にテーブルを作成する
- 18. テンプレート行を使用してテーブルに行を追加する
- 19. jQueryを使用してテーブルのtbodyに行を追加する
- 20. カーソル内のテーブルへの追加
- 21. フォームを作成して複数のテーブルにレコードを追加する
- 22. テーブル内に新しい行を追加した後にJqueryを追加するイベントなし
- 23. 既存テーブルのテーブル変数(または一時テーブル)を追加の列で作成する
- 24. UIviewを作成してiphoneのテーブルのセルに追加します
- 25. 既存のテーブルに新しい行を追加する
- 26. 別のテーブルを作成せずにテーブルを作成する
- 27. MYSQLの列内にテーブルを作成
- 28. jquery/javascriptを使用してテーブル内の行を動的に追加/削除する
- 29. テーブルを追加する動的にJavaScriptを使用して行とセルを追加する
- 30. テーブルの行を作成するTinyMCEプラグイン
peirix:あなたが正しいです、ここでそれは "たぶん、この投稿はhttp://stackoverflow.com/questions/171027/jquery-add-table-row" " – ant