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

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>