gpt4 book ai didi

javascript - 无法使用按钮从动态生成的表中正确删除行

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

我有以下代码应该在表中生成行,其中每一行都有自己的内容和删除按钮。

<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<input id="inputText">
<button onclick = "addRow()">Add text</button>

<table id = "table">
</table>
<script>
function addRow(){

var newRow = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
newRow.appendChild(col1);
newRow.appendChild(col2);

var button = document.createElement("button");
button.innerHTML = "delete";

button.onclick = function () {
var index = this.parentNode.parentNode.rowIndex;
document.getElementById("table").deleteRow(index);
}
col1.appendChild(button);


var enteredText = document.getElementById("inputText").value;
col2.innerHTML = enteredText;

document.getElementById("table").appendChild(newRow);

}
</script>
</body>
</html>

问题是无论我按哪个删除按钮,它都会删除最后一行。我尝试使用 console.log(this.parentNode.parentNode)查看它是否返回正确的 <tr>对象,它确实如此。但由于某种原因,属性 rowIndex无论按下什么按钮都是-1;因此只有最后一行被删除。是不是意味着每个动态生成<tr>不知道它的行索引?

最佳答案

您可以使用 HTMLTableElement.insertRow()函数代替。

var newRow = document.getElementById("table").insertRow();
// newRow.rowIndex will return you the proper index

Here is a working fiddle

更新

这是 Webkit 布局引擎中的一个错误(也转移到了 fork 的 Blink 引擎)。这就是它在 Firefox 中运行良好但在 Chrome 早期版本 (Blink) 或 Safari (Webkit) 中运行良好的原因。

错误报告是here ,现在已修复。

关于javascript - 无法使用按钮从动态生成的表中正确删除行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30553848/

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