В JavaScript, как я могу добавить строку динамически в таблицу? В событии JavaScript я хочу создать аналогичную строку и добавить ее в таблицу.
Создать клон строки таблицы и добавить к таблице в JavaScript
Ответ 1
Если вы не хотите использовать jQuery, есть несколько простых функций, которые вы могли бы использовать, например cloneNode()
, createElement()
и appendChild()
. Ниже приведена простая демонстрация, добавляющая строку в конец таблицы с использованием метода клонирования или создания. Протестировано в 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>
Ответ 2
пробовал всевозможные поисковые запросы сегодня, используя источники: 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), в которых была метка + текстовое поле
Ответ 3
Я знаю его старый пост, но я чувствую, что следующий код может помочь другим читателям
$("button").click(function () {
$("#DataRow").clone().appendTo("#mainTable");
});