这是JS代码
function load(){
var data = [
{
"id": "qc1111",
"quizName": "Quiz1",
"course": "111",
"dueDate": "1/1/2017",
"closeDate": "2/2/2017"
},
{
"id": "qc2222",
"quizName": "Quiz2",
"course": "222",
"dueDate": "2/2/2017",
"closeDate": "3/3/2017"
},
{
"id": "qc3333",
"quizName": "Quiz3",
"course": "333",
"dueDate": "3/3/2017",
"closeDate": "4/4/2017"
}
]
s=document.getElementById("quizList");
drawTable(s,data);
}
function drawTable(s,data) {
var t = document.createElement("table");
t.id = "t01";
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("Quiz Name"));
var th3 = document.createElement("th");
th3.appendChild(document.createTextNode("Course Name"));
var th4 = document.createElement("th");
th4.appendChild(document.createTextNode("Due Date"));
var th5 = document.createElement("th");
th5.appendChild(document.createTextNode("Close Date"));
var th8 = document.createElement("th");
th8.appendChild(document.createTextNode("Operation"));
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
tr.appendChild(th5);
tr.appendChild(th8);
thead.appendChild(tr);
var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
tr = document.createElement("tr");
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(data[i].quizName));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(data[i].course));
var td4 = document.createElement("td");
td4.appendChild(document.createTextNode(data[i].dueDate));
var td5 = document.createElement("td");
td5.appendChild(document.createTextNode(data[i].closeDate));
var td8 = document.createElement("td");
var bt4 = document.createElement("button");
bt4.className = "one";
bt4.name = data[i].id;
bt4.onclick = function(arg) {
return function() {
console.log(arg);
tbody.deleteRow(arg);
}
}(i);
var text = document.createTextNode("Del");
bt4.appendChild(text);
td8.appendChild(bt4);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td8);
tbody.appendChild(tr);
}
t.appendChild(thead);
t.appendChild(tbody);
s.appendChild(t);
}
这是html代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Quiz Index</title>
</head>
<script src="assets/javascript/quizList.js"></script>
<body onload="load()">
<body>
<div><h1 id="h01">Quiz Index</h1><button class="add_button">Add a Quiz</button></div>
<div id="quizList"></div>
</body>
当我已经单击“del”按钮删除 Quiz2 行，然后尝试删除 Quiz3 行时。我无法通过单击“del”按钮删除 Quiz3 行。我认为这是因为表大小已更改，因此行索引也已更改。但我不知道如何解决它。有人能帮我解决这个问题吗？
最佳答案
尝试:
bt4.onclick = function(arg) {
return function() {
var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}(i);
关于javascript - 如何通过JS绘制的表格上的按钮删除行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42460373/