title: HTML - Table, Adding Row, EditingRow
body: <p>Page: <a href="https://jsfiddle.net/4gkwesan/" rel="nofollow noreferrer">Demo jsfiddle</a></p>
  
  <p>I am working on getting a table created with many different features.</p>
  
  <p>Function: sortTable sorts the table. (Working)</p>
  
  <p>Function: table_new pulls up new line. (Working)</p>
  
  <p>Function: table_Cancel cancels new line &amp; Edit line. (Working)</p>
  
  <p>Feature: If table is to large, it will turn on scrolling feature. (Working) (View CSS in Demo.)</p>
  
  <p>I am unable to get the function: table_add_row, table_edit_row to work correctly. Also in table_add_row, I cant figure out how to add the &lt; FORM> section to be imported.</p>
  
  <p>I will be submitting changes to PHP > MySQL database, then reloading table on submission.</p>
  
  <p>HTML Section:</p>
  
  <pre><code>&lt;table border="1" id="myTable" class="table recipe-table f_center"&gt;
    &lt;div class="thead"&gt;
      &lt;tr&gt;
        &lt;th class="tb_head" style="Width:auto; background-color:#e2e0cb;"&gt;
          &lt;button id="new" onclick="table_new()"&gt;New&lt;/button&gt;
          &lt;button id="Cancel" onclick="table_Cancel()" class="tb_hide"&gt;Cancel&lt;/button&gt;
        &lt;/th&gt;
        &lt;th class="tb_head tb_hide" style="Width:auto; background-color:#e2e0cb;"&gt;id&lt;/th&gt;
        &lt;th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(2)"&gt;&lt;span class="tb_head_a"&gt;A&lt;/span&gt;
        &lt;/th&gt;
        &lt;th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(3)"&gt;&lt;span class="tb_head_a"&gt;B&lt;/span&gt;
        &lt;/th&gt;
        &lt;th class="tb_head" style="Width:auto; background-color:#e2e0cb;" onclick="sortTable(4)"&gt;&lt;span class="tb_head_a"&gt;C&lt;/span&gt;
        &lt;/th&gt;
    &lt;/div&gt;
    &lt;div class="tbody"&gt;
      &lt;tr class="tb_new" id="table_new"&gt;
        &lt;!--&lt;form&gt;--&gt;
        &lt;td&gt;
          &lt;button id="t_new" name="t_new"&gt;Submit&lt;/button&gt;
        &lt;/td&gt;
        &lt;td class="tb_hide"&gt;
          &lt;input type="text" id="ID_Edit"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" id="A_New" class="measurement_size"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" id="B_New" class="measurement_size"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" id="C_New" class="measurement_size"&gt;
        &lt;/td&gt;
        &lt;!--&lt;/form&gt;--&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;!--&lt;form&gt;--&gt;
        &lt;td&gt;
          &lt;button id="table_edit_1" onclick="table_edit_row(1)"&gt;Edit&lt;/button&gt;
          &lt;button id="table_submit_1" onclick="table_submit(1)" class="tb_hide"&gt;submit&lt;/button&gt;
        &lt;/td&gt;
        &lt;td class="tb_hide"&gt;1&lt;/td&gt;
        &lt;td&gt;7&lt;/td&gt;
        &lt;td&gt;8&lt;/td&gt;
        &lt;td&gt;9&lt;/td&gt;
        &lt;!--&lt;/form&gt;--&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;!--&lt;form&gt;--&gt;
        &lt;td&gt;
          &lt;button onclick="table_edit_row(2)"&gt;Edit&lt;/button&gt;
          &lt;button id="table_submit_2" onclick="table_submit(2)" class="tb_hide"&gt;submit&lt;/button&gt;
        &lt;/td&gt;
        &lt;td class="tb_hide"&gt;2&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;!--&lt;/form&gt;--&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;!--&lt;form&gt;--&gt;
        &lt;td&gt;
          &lt;button onclick="table_edit_row(3)"&gt;Edit&lt;/button&gt;
          &lt;button id="table_submit_3" onclick="table_submit(3)" class="tb_hide"&gt;submit&lt;/button&gt;
        &lt;/td&gt;
        &lt;td class="tb_hide"&gt;3&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;6&lt;/td&gt;
        &lt;!--&lt;/form&gt;--&gt;
      &lt;/tr&gt;
    &lt;/div&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Java Script:</p>
  
  <pre><code>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 &lt; 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 = '&lt;button id="table_edit_' + temp_found + '" onclick="table_edit_row("' + temp_found + '")"&gt;Edit&lt;/button&gt;&lt;button id="' + temp_submit + '" onclick="table_submit(temp_number)" class="tb_hide"&gt;submit&lt;/button&gt;';
    cell1.innerHTML = temp_found;
    cell2.innerHTML = document.getElementById('A_New').value;
    cell3.innerHTML = document.getElementById('B_New').value;
    cell4.innerHTML = document.getElementById('C_New').value;
    table_Cancel()
  }
  
  function table_edit_row(x) {
    document.getElementById("new").style.display = "none";
    document.getElementById("Cancel").style.display = "block";
    var ID, A, B, C, temp_A, temp_B, temp_C, table_name, table_value;
    table_name = document.getElementById("myTable");
    for (var i = 1, row; row = table_name.rows[i]; i++) {
      if (table.rows[i].cells[1].innerHTML = x) {
        ID = table_name.rows[i].cells[1].innerHTML;
        A = table_name.rows[i].cells[2].innerHTML;
        B = table_name.rows[i].cells[3].innerHTML;
        C = table_name.rows[i].cells[4].innerHTML;
        document.getElementById('table_edit_' + ID).style.display = "None";
        document.getElementById('table_submit_' + ID).style.display = "block";
        table_name.rows[i].cells[2].innerHTML = '&lt;input type="text" id="a_edit" value="' + A + '"&gt;';
        table_name.rows[i].cells[3].innerHTML = '&lt;input type="text" id="b_edit" value="' + B + '"&gt;';
        table_name.rows[i].cells[4].innerHTML = '&lt;input type="text" id="c_edit" value="' + C + '"&gt;';
      }
    }
  }
  
  function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    //Set the sorting direction to ascending:
    dir = "asc";
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
      //start by saying: no switching is done:
      switching = false;
      rows = table.getElementsByTagName("TR");
      /*Loop through all table rows (except the
      first, which contains table headers):*/
      for (i = 2; i &lt; (rows.length - 1); i++) {
        //start by saying there should be no switching:
        shouldSwitch = false;
        /*Get the two elements you want to compare,
        one from current row and one from the next:*/
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /*check if the two rows should switch place,
        based on the direction, asc or desc:*/
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() &gt; y.innerHTML.toLowerCase()) {
            //if so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() &lt; y.innerHTML.toLowerCase()) {
            //if so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        /*If a switch has been marked, make the switch
        and mark that a switch has been done:*/
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        //Each time a switch is done, increase this count by 1:
        switchcount++;
      } else {
        /*If no switching has been done AND the direction is "asc",
        set the direction to "desc" and run the while loop again.*/
        if (switchcount == 0 &amp;&amp; dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  }
  </code></pre>
  
  <p>Page: <a href="https://jsfiddle.net/4gkwesan/" rel="nofollow noreferrer">Demo jsfiddle</a></p>
  
  <p>Please no jquery script, I want normal java script if possible.</p>