Wie kann ich in JavaScript eine Zeile dynamisch zu einer Tabelle hinzufügen? Bei einem JavaScript-Ereignis möchte ich eine ähnliche Zeile erstellen und an die Tabelle anhängen.Klon der Tabellenzeile erstellen und in JavaScript an die Tabelle anhängen
Wenn Sie jQuery nicht verwenden möchten, können Sie einige einfache Funktionen wie cloneNode(), createElement() und appendChild() verwenden. Hier ist eine einfache Demonstration, die eine Zeile an das Ende der Tabelle anfügt, entweder mit der clone- oder create-Methode. Getestet in IE8 und 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>alle Arten von Suchanfragen heute versucht, Gebrauch gemacht Quellen: http://www.mredkj.com/tutorials/tablebasics3.html und http://www.mredkj.com/tutorials/tableaddcolumn.html
hier ist das Ergebnis meiner Logik der Forschung, es ist jetzt
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
}
NOTE1: mein Tisch enthielt eine Zelle, die a hatte Textfeld + ein Etikett pro Tabellenzeile (tr).
NOTE2: in einer Reihe, es mehrere waren (td) 's, die
Hast du ein voll funktionsfähiges Beispiel? –
Ich weiß, ihr einen alten Post ein Label + Textbox hatte, aber ich fühle mich den folgenden Code ein anderer Leser
$("button").click(function() {
$("#DataRow").clone().appendTo("#mainTable");
});
peirix helfen können: Du hast recht, hier ist es "Vielleicht hilft dieser Beitrag http://stackoverflow.com/questions/171027/jquery-add-table-row" " – ant