javascript - 删除 HTML 表格行

Question

我知道 Stack Overflow 上有成千上万个关于这个特定主题的答案，但我已经阅读了 3 天 3 夜，已经尝试将解决方案应用到我的代码中，但没有成功。

问题是 addRow 工作正常，但是 DeleteRow 根本不工作。

这是我的 HTML:

<input type="button" value="add" onClick="addRow('dataTable')" /> 
<input type="button" value="delete" onclick="deleteRow(this)"/> 
<p></p>
</p>
</table>
<table id="dataTable" class="cv" border="1">
  <tr>
    <td>
      <input type="text" style="width:100%" placeholder="ievadiet valodu">
    </td>
    <td>
      <select id="BX_gender" name="BX_gender" required="required">
        <option>dzimtā valoda</option>
        <option>teicami</option>
        <option>labi</option>
        <option>viduvēji</option>
        <option>pamatzināšanas</option>
      </select>
    </td>
    <td>
      <select id="BX_gender" name="BX_gender" required="required">
        <option>teicami</option>
        <option>labi</option>
        <option>viduvēji</option>
        <option>pamatzināšanas</option>
      </select>
    </td>
    <td>
      <select id="BX_gender" name="BX_gender" required="required">
        <option>teicami</option>
        <option>labi</option>
        <option>viduvēji</option>
        <option>pamatzināšanas</option>
      </select>
    </td>
  </tr>
</table>
<div class="clear"></div>
</fieldset>

JavaScript:

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) {
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    } else {
        alert("Maksimālais ierakstu skaits ir 7.");
    }
}

function DeleteRow(o) {
    //no clue what to put here?
    var p = o.parentNode.parentNode;
    p.parentNode.removeChild(p);
}

这是一个代码工作的 fiddle (只有 addRow 函数):http://jsfiddle.net/7AeDQ/690/

Answer 1

假设你想删除最后一行，你可以使用这样的东西

function deleteRow() {
     var table = document.getElementById("dataTable");
    var tbody = table.tBodies[0];
         tbody.removeChild(tbody.lastChild);
    }

更新 fiddle here

使用这样的东西，你不需要使用 parentNode.parentNode 遍历 DOM...