Javascript 如何通过点击JS绘制的表格上的按钮删除行_Javascript_Html_Json

Javascript 如何通过点击JS绘制的表格上的按钮删除行

javascript html json

Javascript 如何通过点击JS绘制的表格上的按钮删除行,javascript,html,json,Javascript,Html,Json,这是JS代码 function load(){ var data = [ { "id": "qc1111", "quizName": "Quiz1", "course": "111", "dueDate": "1/1/2017", "closeDate": "2/2/2017" }, { "id":

这是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);
}

函数加载（）{
风险值数据=[
{
“id”：“qc1111”，
“quizName”：“Quiz1”，
“课程”：“111”，
“截止日期”：“2017年1月1日”，
“截止日期”：“2017年2月2日”
},
{
“id”：“qc2222”，
“quizName”：“Quiz2”，
“课程”：“222”，
“截止日期”：“2017年2月2日”，
“截止日期”：“2017年3月3日”
},
{
“id”：“qc3333”，
“quizName”：“Quiz3”，
“课程”：“333”，
“截止日期”：“2017年3月3日”，
“截止日期”：“2017年4月4日”
}
]
s=document.getElementById（“quizList”）；
图纸、数据；
}
函数绘图表（s、数据）{
var t=document.createElement（“表”）；
t、 id=“t01”；
var thead=document.createElement（“thead”）；
var tr=document.createElement（“tr”）；
var th2=document.createElement（“th”）；
th2.appendChild（document.createTextNode（“测验名称”）；
var th3=document.createElement（“th”）；
th3.appendChild（document.createTextNode（“课程名称”）；
var th4=document.createElement（“th”）；
th4.appendChild（document.createTextNode（“到期日”）；
var th5=document.createElement（“th”）；
th5.appendChild（document.createTextNode（“关闭日期”）；
var th8=document.createElement（“th”）；
th8.appendChild（document.createTextNode（“操作”）；
tr.appendChild（th2）；
tr.appendChild（th3）；
tr.appendChild（th4）；
tr.appendChild（th5）；
tr.appendChild（th8）；
附肢儿童（tr）；
var tbody=document.createElement（“tbody”）；
对于（变量i=0；i


这是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>


测验索引
测验索引添加测验

当我已经点击“删除”按钮删除Quiz2行，然后尝试删除Quiz3行时。我无法通过单击“删除”按钮删除Quiz3行。我想这是因为表的大小已经改变了，所以行的索引也改变了。但我不知道如何修复它。谁能帮我解决这个问题
 试试：
bt4.onclick = function(arg) {
  return function() {
      var row = this.parentNode.parentNode;
      row.parentNode.removeChild(row);
  }
}(i);

我是JS方面的新手。你能告诉我一些如何写得更好的建议吗？多谢各位@罗科·C·布尔扬