使用 javascript 删除具有选定 ID 的 table 行

Question

我正在尝试使代码在 select 框中的 selecting id 上添加和删除所需的行。我的代码如下：

HTML代码：

<body>
        <table id="table" border="1" style="float:left">
            <tr>
                <td>Employee id</td>
                <td>Name</td>
                <td>Designation</td>
            </tr>
        </table>

        <select id="select_id" style="float:right">
            <option>--select--</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select><br/><br/>

        <button onclick="delete_row()" style="float:right">remove</button>
        <button onclick="include()" style="float:right">add</button>

</body>

我的javascript代码：

<script type="text/javascript">
        var employees=new Array(2);

        for(i=0;i<2;i++)
            employees[i] = new Array(3);

        employees[0][0] = 1;
        employees[0][1] = "Rahul";
        employees[0][2] = "Administer";

        employees[1][0] = 2;
        employees[1][1] = "Raj";
        employees[1][2] = "Manager";

        function include(){
            var id = document.getElementById("select_id").value;
            var table = document.getElementById("table");
            var row = table.insertRow();
            id=id-1;

            var col1 = row.insertCell(0);
            var col2 = row.insertCell(1);
            var col3 = row.insertCell(2);

            col1.innerHTML = employees[id][0];
            col2.innerHTML = employees[id][1];
            col3.innerHTML = employees[id][2];
        }
    </script>

添加按钮工作正常。但是对于删除按钮，我无法获得删除所有具有 selected id 的行的功能。有人可以推荐我吗？

我在 jsfiddle 中的代码：https://jsfiddle.net/noona/fNPvf/23235/

Answer 1

添加新行时，为新添加的行提供一个属性以保存其 id 值。然后就可以删除dropmenu中属性值等于selected id的所有行了。您可以尝试以下操作：

function include(){
var table = document.getElementById("table");
        var id = document.getElementById("select_id").value;
        var table = document.getElementById("table");
        var row = table.insertRow();

        // give the new row an attribute that can identify itself
        row.setAttribute("emplId",id);

        id=id-1;

        var col1 = row.insertCell(0);
        var col2 = row.insertCell(1);
        var col3 = row.insertCell(2);

        col1.innerHTML = employees[id][0];
        col2.innerHTML = employees[id][1];
        col3.innerHTML = employees[id][2];

    }

function delete_row() {
    var table = document.getElementById("table");
    var id = document.getElementById("select_id").value;
    for(var i = 0; i<table.rows.length; i++) { // iterate through the rows
        var rowEmplId = table.rows[i].getAttribute("emplId");
        if(rowEmplId==id) { // found a row matches the selected option
            table.deleteRow(i); // remove this row
            i--; // we just removed a row, so we need to adjust the cursor   
        }
    }
}

Answer 2

使用 querySelectorAll 和 rowIndex 来实现这一点。这是您更新后的代码

var employees = new Array(2);

for (i = 0; i < 2; i++)
  employees[i] = new Array(3);

employees[0][0] = 1;
employees[0][1] = "Rahul";
employees[0][2] = "Administer";

employees[1][0] = 2;
employees[1][1] = "Raj";
employees[1][2] = "Manager";

function include() {
  var id = document.getElementById("select_id").value;
  var table = document.getElementById("table");
  var row = table.insertRow();
  id = id - 1;
  row.id = id;
  var col1 = row.insertCell(0);
  var col2 = row.insertCell(1);
  var col3 = row.insertCell(2);

  col1.innerHTML = employees[id][0];
  col2.innerHTML = employees[id][1];
  col3.innerHTML = employees[id][2];
}

function delete_row() {
  var id = document.getElementById("select_id").value - 1;
  var table = document.getElementById("table");
  rowsCount = table.querySelectorAll('tr[id="' + id + '"');

  for (var i = 0; i < rowsCount.length; i++) {
    table.deleteRow(rowsCount[i].rowIndex);
  }

}

<table id="table" border="1" style="float:left">
  <tr>
    <td>Employee id</td>
    <td>Name</td>
    <td>Designation</td>
  </tr>
</table>

<select id="select_id" style="float:right">
  <option>--select--</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<br/>
<br/>

<button onclick="delete_row()" style="float:right">remove</button>
<button onclick="include()" style="float:right">add</button>

使用 javascript 删除具有选定 ID 的 table 行

Delete table rows having selected id using javascript

html

javascript

delete-row