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

Question

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

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

然后我更新表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>