gpt4 book ai didi

javascript - 动态向表中添加数据

转载 作者:行者123 更新时间:2023-11-29 17:56:17 25 4
gpt4 key购买 nike

我试图动态地向表中添加行,但它连接了两个文本框的数据,然后将其添加到第一个 <td> , 可能是什么问题?

function AddDataToTable() {
var id = document.getElementById("id1").value;
var firstname = document.getElementById("firstname").value;
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
trNode.appendChild(tdNode);
var trID = document.createTextNode(id);
var trFirstName = document.createTextNode(firstname);
tdNode.appendChild(trID);
tdNode.appendChild(trFirstName);
document.getElementById("productable").appendChild(trNode);
}
<table id="productable" border="1">
<tr>
<th>ID</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
</tr>
</table>
<br/>
<input type="text" name="id" id="id1">
<input type="text" name="firstname" id="firstname">
<input type="button" onclick="AddDataToTable()" value="Add" />

最佳答案

需要创建两个 td 元素并分别向它们附加两次文本节点。

function AddDataToTable() {
var productable = document.getElementById("productable");
var id = document.getElementById("id1").value;
var firstname = document.getElementById("firstname").value;
var trNode = document.createElement("tr");
// creating a delete button.
var btn = document.createElement("BUTTON");
btn.innerHTML = 'delete';
btn.addEventListener("click", function () {

productable.removeChild(trNode);
});

var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
trNode.appendChild(btn);
var trID = document.createTextNode(id);
var trFirstName = document.createTextNode(firstname);
tdNode1.appendChild(trID);
tdNode2.appendChild(trFirstName);
document.getElementById("productable").appendChild(trNode);
}
#productable,
th,
td {
border: 1px dotted grey;
}
td {
padding: 20px;
}
th {
text-align: center;
}
<title>Table</title>

<body>
<table id="productable">
<tr>
<th>ID</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
</tr>
</table>
<br/>
<input type="text" name="id" id="id1">
<input type="text" name="firstname" id="firstname">
<input type="button" onclick="AddDataToTable()" value="Add" />
</body>

关于javascript - 动态向表中添加数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38757775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com