Table, New row, Edit row

Creating table with many function's. New Row Edit Row Sorting Table - Done

HTML

<table border="1" id="myTable" class="table recipe-table f_center">
  <div class="thead">
    <tr>
      <th class="tb_head" style="Width:auto; background-color:#e2e0cb;">
        <button id="new" onclick="table_new()">New</button>
        <button id="Cancel" onclick="table_Cancel()" class="tb_hide">Cancel</button>
      </th>
      <th class="tb_head tb_hide" style="Width:auto; background-color:#e2e0cb;">id</th>
      <th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(2)"><span class="tb_head_a">A</span>
      </th>
      <th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(3)"><span class="tb_head_a">B</span>
      </th>
      <th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(4)"><span class="tb_head_a">C</span>
      </th>
  </div>
  <div class="tbody">
    <tr class="tb_new" id="table_new">
      <!--<form>-->
      <td>
        <button id="t_new" name="t_new">Submit</button>
      </td>
      <td class="tb_hide">
        <input type="text" id="ID_Edit">
      </td>
      <td>
        <input type="text" id="A_New" class="measurement_size">
      </td>
      <td>
        <input type="text" id="B_New" class="measurement_size">
      </td>
      <td>
        <input type="text" id="C_New" class="measurement_size">
      </td>
      <!--</form>-->
    </tr>
    <tr>
      <!--<form>-->
      <td>
        <button id="table_edit_1" onclick="table_edit_row(1)">Edit</button>
        <button id="table_submit_1" onclick="table_submit(1)" class="tb_hide">submit</button>
      </td>
      <td class="tb_hide">1</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <!--</form>-->
    </tr>
    <tr>
      <!--<form>-->
      <td>
        <button onclick="table_edit_row(2)">Edit</button>
        <button id="table_submit_2" onclick="table_submit(2)" class="tb_hide">submit</button>
      </td>
      <td class="tb_hide">2</td>
      <td>1</td>
      <td>2</td>
     ...

CSS

.error {
  color: #FF0000;
}

.f_left {
  float: left;
}

.f_center {
  float: center;
}

.f_right {
  float: right;
}

.t_left {
  text-align: left;
}

.t_center {
  text-align: center;
}

.t_right {
  text-align: right;
}

.measurement_size {
  width: 50px;
  -webkit-transition: all .35s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.measurement_size:focus {
  width: 125px;
}

// Table Design
table {
  border: #d0d0d0 1px solid;
  border-collapse: collapse;
  margin: auto;
  //width: 40%;
  border-space: 2px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tb_head {
  background-color: #e2e0cb;
}

.tb_head_a {
  color: #72705b;
}

.tb_head_a:hover {
  color: #ffcc33;
}

.tb_body:hover {
  background-color: #e2f3fc;
}

.tb_hide {
  display: none;
}

.tb_new {
  display: none;
}

.recipe-table-cont {
  width: 100%;
  overflow-x: auto;
}

.recipe-table-cont .table-responsive {
  //border: #d0d0d0 1px solid;
  //border-collapse: collapse;
  margin: auto;
  width: 90%;
  border-space: 2px;
}

.recipe-table {
  table-layout: fixed;
}

.recipe-table thead,
.recipe-table tbody {
  display: block;
}

.recipe-table tbody {
  max-height: 350px;
  overflow-y: auto;
}

JavaScript

function table_new() {
  document.getElementById("table_new").style.display = "table-row";
  document.getElementById("new").style.display = "none";
  document.getElementById("Cancel").style.display = "block";
  document.getElementById('A_New').value = '';
  document.getElementById('B_New').value = '';
  document.getElementById('C_New').value = '';
  document.getElementById("ID_Edit").value = '';
}

function table_Cancel() {
  document.getElementById("table_new").style.display = "none";
  document.getElementById("new").style.display = "block";
  document.getElementById("Cancel").style.display = "none";
  document.getElementById('A_New').value = '';
  document.getElementById('B_New').value = '';
  document.getElementById('C_New').value = '';
  document.getElementById("ID_Edit").value = '';
  var ID, table_name, rowLength;
  table_name = document.getElementById("myTable");
  rowLength = table_name.rows.length;
  for (var i = 1; i < rowLength; i += 1) {
    ID = table_name.rows[i].cells[2].innerHTML;
    document.getElementById("table_edit_" + ID).style.display = "block";
    document.getElementById("table_submit_" + ID).style.display = "none";
  }
}

function table_add_row() {
  var table_name, row, ID, A, B, C, number_row, temp_number, temp_found, temp_submit;
  table_name = document.getElementById("myTable");
  number_row = 0;
  temp_found = 0;

  for (var i = 2, row; row = table_name.rows[i]; i++) {
    temp_number = "new_" + number_row;
    if (temp_number = table_name.rows[i].cells[1].innerHTML) {
      number_row++
      i = 2;
    }
  }
  row = table_name.insertRow(2);
  ID = document.getElementById("ID_Edit").value
  var cell0 = row.insertCell(0);
  var cell1 = row.insertCell(1);
  var cell2 = row.insertCell(2);
  var cell3 = row.insertCell(3);
  var cell4 = row.insertCell(4);
  temp_number = "new_" + number_row;
  temp_submit = "table_submit_" + temp_number;
  cell0.innerHTML = '<button id="table_edit_' + temp_found + '" onclick="table_edit_row("' +...