Javascript Sort not working after CRUD operation

Question

I have this HTML table that works well when I sorted the hard-coded data, especially the first column, but after the sort, when CRUD operation happens (Add/Edit), it will call right away the arrTable.reverse() method. It will sort again right if we click the second column but not again after adding or editing the data.

**Update **I just want that after I add or insert new row, I can only call the sort function, not the reverse.

cPrev = -1; // global var saves the previous c, used to
// determine if the same column is clicked again

function sortBy(c) {

  rows = document.getElementById("data_table").rows.length - 1; // num of rows

  columns = document.getElementById("data_table").rows[0].cells.length; // num of columns
  arrTable = [...Array(rows)].map(e => Array(columns)); // create an empty 2d array

  for (ro = 0; ro < rows; ro++) { // cycle through rows
    for (co = 0; co < columns; co++) { // cycle through columns
      // assign the value in each row-column to a 2d array by row-column
      arrTable[ro][co] = document.getElementById("data_table").rows[ro].cells[co].innerHTML;
    }
  }

  th = arrTable.shift(); // remove the header row from the array, and save it //c !== cPrev
  // if (c === cPrev ){ // different column is clicked, so sort by the new column

  if (c !== cPrev) { // different column is clicked, so sort by the new column


    arrTable.sort(
      function(a, b) {
        if (a[c] === b[c]) {
          return 0;
        } else {
          return (a[c] < b[c]) ? -1 : 1;
        }
      }
    );



  } else { // if the same column is clicked then reverse the array
    arrTable.reverse();
  }

  cPrev = c; // save in previous c

  arrTable.unshift(th); // put the header back in to the array

  // cycle through rows-columns placing values from the array back into the html table
  for (ro = 0; ro < rows; ro++) {
    for (co = 0; co < columns; co++) {
      document.getElementById("data_table").rows[ro].cells[co].innerHTML = arrTable[ro][co];
    }
  }
}





const removeSaveBtns = () => {
  const saveBtns = document.querySelectorAll('.save');
  saveBtns.forEach((btn, i) => {
    btn.style.display = "none";
  })
}



removeSaveBtns();



function edit_row(no) {
  document.getElementById("edit_button" + no).style.display = "none";
  document.getElementById("save_button" + no).style.display = "";

  var name = document.getElementById("name_row" + no);


  var name_data = name.innerHTML;

  name.innerHTML = "";

}

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 = "";

}

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
}





function addOne(button) {
  console.log(button.nextElementSibling.innerHTML)
  var spanEle = button.nextElementSibling;
  var old = parseInt(spanEle.innerHTML)
  spanEle.innerHTML = old + 1;
}



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 = "" + new_name + "" + new_city + "  ";


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



  removeSaveBtns();


}

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

table {
  width: 100%;
  table-layout: fixed;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: 300px;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

th {
  padding: 10px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

td {
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
  font-family: 'Roboto', sans-serif;
}

section {
  margin: 50px;
}

button {
  background: linear-gradient(to bottom right, #EF4765, #FF9A5A);
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.5;
  outline: transparent;
  padding: 0 1rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

button:not([disabled]):focus {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

button:not([disabled]):hover {
  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

Thanks a lot.

Javascript Sort not working after CRUD operation

0 Answers