Question

我需要删除除头部和用户可以输入项目的初始行之外的所有表格内容。我在表长度上运行一个循环，它删除了除了我想要的两行的id之外的每一行。有一行不应与if语句中的异常匹配，但 NEVER 会被删除。问题是什么？

以下是HTML（请注明您不需要编辑的<script src="myscript.js"></script>）：

<HTML>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>

<tbody><tr id="head">
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>

<tr id="row-1">
<td id="col-1">AAAA</td><td id="col-2">A</td>
<td id="col-3">
    <button type="button" class="edit-button" id="edit-button-1">Edit</button>
    <button type="button" class="save-button" id="save-button-1">Save</button>
    <button type="button" class="delete-button" id="delete-button-1">Delete</button>
</td>
</tr>

<tr id="row-3"><td id="col-1">BBB</td>
<td id="col-2">B</td><td id="col-3">
    <button type="button" class="edit-button" id="edit-button-3">Edit</button>
    <button type="button" class="save-button" id="save-button-3">Save</button>
    <button type="button" class="delete-button" id="delete-button-3">Delete</button>
</td>
</tr>

<tr id="initial-row">
<td><input id="text-field" type="text"></td>

<td>
    <select name="levels-list" id="levels-list">
    <option value="A" id="option-1">A</option>
    <option value="B" id="option-2">B</option>
    <option value="C" id="option-3">C</option>
    </select>
</td>

<td><input class="add" id="add-button" value="Add" type="button"></td>
</tr>
<script src="myscript.js"></script>
</tbody>

</table>
</div>
</HTML>

这是脚本：

var table = document.getElementById("data_table");
for(var y=0; y<table.rows.length; y++)
  {
    console.log("deleting row "+ y);

    if ((table.rows[y].id!= "initial-row") && (table.rows[y].id!= "head"))
    {
      console.log("inside if statement");
      table.deleteRow(y); //delete the row
      console.log("row deleted");
    }
    else{ console.log("inside else. row is not deleted.");}

  }//end for

 console.log(table.innerHTML);

修改为了澄清，我实际做的是该表包含行指定的ID（行-1，行-2，行-2，行-3）。该表基于从数组中读取的项目构建。有一个删除按钮。如果删除了某个项目，我会使用table.deleteRow(rowindex);将其删除，并从数组中删除该行的值。删除后，表行ID变为非后续行。因此，我想删除除初始行（头部和初始输入）之外的所有行，并重新计算ID并在删除的项目后使用新的ID构建新表。表行按顺序排列，没有间隙。这对我很重要。

Answer 1

您的主要问题是索引会在删除行时发生更改。如果在for（）循环中删除一个，则还需要更改y。或者，反向工作，以便从底部删除行，索引不会改变。

更简洁的方法是将您的行头移至<thead>并使用querySelectorAll()选择要在tbody中删除的行，并使用not()排除初始行

＆＃13;

var table = document.getElementById("data_table");
var rowstoDelete = table.querySelectorAll('tbody tr:not(#initial-row)');

[].slice.call(rowstoDelete).forEach(function(row) {
  row.remove()
});

＆＃13;

<div id="wrapper">
  <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
    <thead>
      <tr id="head">
        <th>Name</th>
        <th>Type</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr id="row-1">
        <td id="col-1">AAAA</td>
        <td id="col-2">A</td>
        <td id="col-3">
          <button type="button" class="edit-button" id="edit-button-1">Edit</button>
          <button type="button" class="save-button" id="save-button-1">Save</button>
          <button type="button" class="delete-button" id="delete-button-1">Delete</button>
        </td>
      </tr>

      <tr id="row-3">
        <td id="col-1">BBB</td>
        <td id="col-2">B</td>
        <td id="col-3">
          <button type="button" class="edit-button" id="edit-button-3">Edit</button>
          <button type="button" class="save-button" id="save-button-3">Save</button>
          <button type="button" class="delete-button" id="delete-button-3">Delete</button>
        </td>
      </tr>

      <tr id="initial-row">
        <td>
          <input id="text-field" type="text">
        </td>

        <td>
          <select name="levels-list" id="levels-list">
            <option value="A" id="option-1">A</option>
            <option value="B" id="option-2">B</option>
            <option value="C" id="option-3">C</option>
          </select>
        </td>

        <td>
          <input class="add" id="add-button" value="Add" type="button">
        </td>
      </tr>

    </tbody>

  </table>
</div>

＆＃13;

Answer 2

我并没有像这样修改DOM，我可以想象并非所有浏览器都支持这种删除行的方式。我真的建议给你想要删除一个额外类的所有行，以便在使用jQuery时删除它们非常容易

$('#table-selector-by-id').find ('.to-be-deleted').remove ();

表行不会被删除

2 个答案: