JavaScript'te, bir tablaya dinamik olarak nasıl satır ekleyebilirim? Bir JavaScript etkinliğinde, benzer bir satır oluşturmak ve tabloya eklemek istiyorum.Tablo satırının klonunu oluşturun ve JavaScript'e tabloya ekleyin
jQuery'yi kullanmak istemezseniz, cloneNode(), createElement() ve appendChild() gibi kullanabileceğiniz birkaç basit işlev vardır. İşte, klonu kullanarak veya bir yöntem kullanarak tablonun sonuna bir satır ekleyen basit bir gösteri. IE8 ve FF3.5'te test edilmiştir.
<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>, şimdi
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
}
Not 1: tablomda bir textbox + tablo satırı başına bir etiket (tr).
NOT2: Arka arkaya birden fazla vardı (td) 'ın bir etiket + metin kutusu
Tam işlevsellik örneğiniz var mı? –
Ben onun eski bir yazı bilin ama şu kod diğer okuyucular yardımcı olabilir hissediyorum vardı
$("button").click(function() {
$("#DataRow").clone().appendTo("#mainTable");
});
peirix: Haklısınız, işte "Belki bu yazı http://stackoverflow.com/questions/171027/jquery-add-table-row" adresinde yardımcı olabilir " – ant