Question

我有以下代码，它应该在表中生成行，其中每行都有自己的内容和删除按钮。

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

Answer 1

您可以使用HTMLTableElement.insertRow()功能。

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

<强> Here is a working fiddle

<强>更新

这是Webkit布局引擎中的一个错误（也转移到了分叉的Blink引擎）。这就是为什么它在Firefox中运行良好但在早期版本的Chrome （Blink）或Safari（Webkit）中没有。

错误报告为here，现在已修复。

Answer 2

有很多方法可以达到你的要求。这是另一个基于您发布的代码的示例。希望它会给你一些进一步的想法。

(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>

无法使用按钮从动态生成的表中正确删除行

2 个答案: