删除 table 行不应允许删除最后一行

Question

我有一个 table，我正在使用以下脚本删除 table 行：

$("#ordertable tr input:checked").parents('tr').remove();

然后我更新 table ID 如下：

function updateRowCount(){
  var table = document.getElementById("ordertable");
  var rowcountAfterDelete = document.getElementById("ordertable").rows.length;  
  for(var i=1;i<rowcountAfterDelete;i++) { 
    table.rows[i].id="row_"+i;
    table.rows[i].cells[0].innerHTML=i+"<input type='checkbox' id='chk_" + i + "'>";
    var j = i+1;
    $("#ordertable tr:nth-child("+j+")").find("td").eq(1).find("select").attr("id","pn_"+i);
    $("#ordertable tr:nth-child("+j+")").find("td").eq(2).find("input").attr("id","notes_"+i);
    $("#ordertable tr:nth-child("+j+")").find("td").eq(3).find("input").attr("id","qty_"+i);
    table.rows[i].cells[4].id = "pdctid_"+i;
  }
}

我需要一个用户不允许删除最后一行的条件。

我的意思是在删除中如果用户标记了最后一行复选框那么我应该得到一个提醒。

Answer 1

您似乎不想删除选中复选框的最后一行。所以你会得到要删除的行，然后得到最后一个选中的复选框的行。如果它们是同一行，请不要删除。否则删除。

下面只是对上述算法进行测试的一个例子。当然还有很多地方可以根据自己的情况进行改进。

例如

function deleteRow(el) {

  // Get the row candidate for deletion
  var row = el.parentNode.parentNode;
  
  // Get last checked checkbox row, if there is one
  var table = row.parentNode.parentNode;
  var cbs = table.querySelectorAll('input:checked');
  var cbRow = cbs.length? cbs[cbs.length - 1].parentNode.parentNode : null;
  
  // If the row to be deleted is the same as the last checked checkbox row
  // don't delete it
  if (row === cbRow) {
    alert("Can't touch this...");
  
  // Otherwise, delete it
  } else {
    row.parentNode.removeChild(row);
  }
}

<table>
  <tr>
    <td>0 <input type="checkbox">
    <td><button onclick="deleteRow(this)">Delete row</button>
  <tr>
    <td>1 <input type="checkbox">
    <td><button onclick="deleteRow(this)">Delete row</button>
  <tr>
    <td>2 <input type="checkbox">
    <td><button onclick="deleteRow(this)">Delete row</button>
</table>

删除 table 行不应允许删除最后一行

Delete table rows should not allow to delete last row

javascript

jquery

html-table

tablerow