Удаление строк таблицы не должно позволять удалять последнюю строку

Question

У меня есть таблица, и я удаляю строки таблицы, используя следующий скрипт:

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

Затем я обновляю идентификаторы таблицы следующим образом:

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>