如何通過點擊這是JS

繪製表格按鈕，刪除行，這是JS代碼如何通過點擊這是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>

當我已經點擊了「德爾「按鈕刪除Quiz2行，然後嘗試刪除Quiz3行。我不能通過點擊「del」按鈕來刪除Quiz3行。我認爲這是因爲表的大小已經改變，所以行的索引也被改變了。但我不知道如何解決它。任何人都可以幫我解決這個問題嗎？

來源

2017-02-25 yucheng

'<身體的onload = 「負荷（）」>'真的不好 –

我在JS新的學習者。你能告訴我一些關於如何更好地寫它的建議嗎？謝謝。 @Roko C. Buljan – yucheng

嘗試：

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

來源

2017-02-25 19:19:14

非常感謝。有用！ – yucheng

如何通過點擊這是JS

回答

相關問題