Question

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

当我点击了＆＃34; del＆＃34;按钮删除Quiz2行，然后尝试删除Quiz3行。我无法通过点击＆＃34; del＆＃34;删除Quiz3行。按钮。我认为这是因为表的大小已经改变，所以行的索引也已经改变了。但我不知道如何解决它。谁能帮我解决这个问题？

Answer 1

尝试：

bt4.onclick = function(arg) {
  return function() {
      var row = this.parentNode.parentNode;
      row.parentNode.removeChild(row);
  }
}(i);

如何通过单击JS绘制的表上的按钮来删除行

1 个答案: