無法使用按鈕從動態生成的表中正確刪除行

我有下面的代碼應該在表中生成行，其中每行都有自己的內容和刪除按鈕。無法使用按鈕從動態生成的表中正確刪除行

<!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>都不知道它的行索引？

來源

2015-05-31 Ben B

什麼是瀏覽器？它適用於我的Firefox，但不適用於Chrome！ –

我已經在Chrome和Safari（都爲Mac）上嘗試過它，並且它們都不起作用。 –

您可以改用HTMLTableElement.insertRow()函數。

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

Here is a working fiddle

更新

這是在WebKit的佈局引擎中的錯誤，（即移動到分叉閃爍引擎以及）。這就是爲什麼它在Firefox中運行良好，但不適用於早期版本的Chrome（Blink）或Safari（Webkit）。

錯誤報告是here，現在已經修復。

來源

2015-05-31 05:41:56

沒有'必須'關於它。這將是一個解決方案。 – Xotic750

@ Xotic750是的，'必須'是我原來的答案的一部分（我忘了也刪除）。起初，我認爲'parentNode'引用的對象有問題。但我意識到，OP代碼是好的，但由於某種原因，它不適用於Chrome（「和Safari」），並且在FireFox上運行良好！ –

有很多方法可以實現您的要求。這是另一個基於您發佈的代碼的例子。希望它會給你一些進一步的想法。

(function() { 
 
    // create references to static elements, no need to search for them each time 
 
    var inputText = document.getElementById("inputText"), 
 
     butAdd = document.getElementById("butAdd"), 
 
     table = document.getElementById("table"); 
 

 
    // a generic function for finding the first parent node, starting at the given node and 
 
    // of a given tag type. Retuns document if not found. 
 
    function findParent(startNode, tagName) { 
 
    var currentNode, 
 
     searchTag; 
 

 
    // check we were provided with a node otherwise set the return to document 
 
    if (startNode && startNode.nodeType) { 
 
     currentNode = startNode; 
 
    } else { 
 
     currentNode = document; 
 
    } 
 

 
    // check we were provided with a string to compare against the tagName of the nodes 
 
    if (typeof tagName === 'string') { 
 
     searchTag = tagName.toLowerCase(); 
 
    } else { 
 
     currentNode = document; 
 
    } 
 

 
    // Keep searching until we find a parent with a mathing tagName or until we get to document 
 
    while (currentNode !== document && currentNode.tagName.toLowerCase() !== searchTag) { 
 
     currentNode = currentNode.parentNode; 
 
    } 
 

 
    // return the match or document 
 
    return currentNode; 
 
    } 
 

 
    // for deleting the current row in which delete was clicked 
 
    function deleteRow(e) { 
 
    // find the parent with the matching tagName 
 
    var parentTr = findParent(e.target, 'tr'); 
 

 
    // did we find it? 
 
    if (parentTr !== document) { 
 
     // remove it 
 
     parentTr.parentNode.removeChild(parentTr); 
 
    } 
 
    } 
 

 
    // for adding a row to the end of the table 
 
    function addRow() { 
 
    // create the required elements 
 
    var newRow = document.createElement("tr"), 
 
     col1 = document.createElement("td"), 
 
     col2 = document.createElement("td"), 
 
     button = document.createElement("button"); 
 

 
    // add some text to the new button 
 
    button.appendChild(document.createTextNode("delete")); 
 
    // add a click event listener to the delete button 
 
    button.addEventListener('click', deleteRow, false); 
 

 
    // append all the required elements 
 
    col1.appendChild(button); 
 
    col2.appendChild(document.createTextNode(inputText.value)); 
 
    newRow.appendChild(col1); 
 
    newRow.appendChild(col2); 
 

 
    // finally append all the elements to the document 
 
    table.appendChild(newRow); 
 
    } 
 

 
    // add click event listener to the static Add text button 
 
    butAdd.addEventListener('click', addRow, false); 
 
}());

<input id="inputText"> 
 
<button id="butAdd">Add text</button> 
 
<table id="table"></table>

來源

2015-05-31 08:43:44 Xotic750

無法使用按鈕從動態生成的表中正確刪除行

回答

相關問題