JavaScript表格CRUD操作后排序异常：点击列触发reverse而非sort求助

问题根源 #

你的代码通过全局变量cPrev记录上一次点击的排序列索引，当执行添加、编辑或删除操作后，表格数据已经更新，但cPrev仍保留着之前的列索引。此时再次点击同一列，代码会判定为"重复点击同一列"，触发arrTable.reverse()而非重新执行排序逻辑，导致无法正确对新数据排序。

修复方案 #

在所有CRUD操作完成后，重置cPrev为初始值-1，让系统认为下一次点击该列是首次操作，强制执行排序逻辑而非反转。

修改后的关键代码 #

1. 编辑保存后重置cPrev

function save_row(no) {
  var name_val = document.getElementById("name_text" + no).value;
  document.getElementById("name_row" + no).innerHTML = name_val;

  document.getElementById("save_button" + no).style.display = "none";
  document.getElementById("edit_button" + no).style.display = "";
  
  // 重置排序状态
  cPrev = -1;
}

2. 删除行后重置cPrev

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
  
  // 重置排序状态
  cPrev = -1;
}

3. 添加行后重置cPrev

function add_row(no) {
  var new_name = document.getElementById("new_name").value;
  var new_city = document.getElementById("new_city").value;

  if (new_name == "" || new_name == null) {
    window.alert("Please Input Team");
    return false;
  }

  var table = document.getElementById("data_table");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='name_city" + table_len + "'>" + new_city + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' id='delete_button" + table_len + "' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name").value = "";
  document.getElementById("new_city").value = "";

  removeSaveBtns();
  
  // 重置排序状态
  cPrev = -1;
}

原理说明 #

每次CRUD操作改变表格数据后，重置cPrev为-1，这样当再次点击之前的排序列时，sortBy函数会触发c !== cPrev的判断（因为cPrev是-1，当前列索引是0或1），从而执行完整的排序逻辑，确保新数据被正确排序，而不是简单反转旧的排序结果。

内容的提问来源于stack exchange，提问作者JLMasc