HTML - 表格，添加行，编辑行

Question

Page：Demo jsfiddle

我正在努力获得一个使用许多不同功能创建的表。

功能：sortTable对表进行排序。 （工作）

功能：table_new拉出新行。 （工作）

功能：table_Cancel取消新行＆amp;编辑行。 （工作）

功能：如果表格很大，它将打开滚动功能。 （工作）（在演示中查看CSS。）

我无法获得函数：table_add_row，table_edit_row才能正常工作。同样在table_add_row中，我无法弄清楚如何添加＆lt; FORM＆GT;要导入的部分。

我将提交对PHP的更改＆gt; MySQL数据库，然后在提交时重新加载表。

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>
      <td>3</td>
      <!--</form>-->
    </tr>
    <tr>
      <!--<form>-->
      <td>
        <button onclick="table_edit_row(3)">Edit</button>
        <button id="table_submit_3" onclick="table_submit(3)" class="tb_hide">submit</button>
      </td>
      <td class="tb_hide">3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <!--</form>-->
    </tr>
  </div>
</table>

Java脚本：

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("' + temp_found + '")">Edit</button><button id="' + temp_submit + '" onclick="table_submit(temp_number)" class="tb_hide">submit</button>';
  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 = '<input type="text" id="a_edit" value="' + A + '">';
      table_name.rows[i].cells[3].innerHTML = '<input type="text" id="b_edit" value="' + B + '">';
      table_name.rows[i].cells[4].innerHTML = '<input type="text" id="c_edit" value="' + C + '">';
    }
  }
}

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 < (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() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < 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 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Page：Demo jsfiddle

请不要使用jquery脚本，如果可能，我想要正常的java脚本。

Answer 1

我看到很多问题。我将继续解决您的添加行问题。

要开始你没有提交按钮做任何事情，所以将该行更改为

<button onclick="table_add_row()" id="t_new" name="t_new">Submit</button>

然后将table_add_row函数更改为此

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;
 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("' + temp_found + '")">Edit</button><button id="'  + temp_submit + '" onclick="table_submit(temp_number)"  class="tb_hide">submit</button>';
  cell1.innerHTML = temp_found;
  cell1.innerHTML = document.getElementById('A_New').value;
  cell2.innerHTML = document.getElementById('B_New').value;
  cell3.innerHTML = document.getElementById('C_New').value;

  }

Answer 2

我已经找到了所有会话，并将在稍后发布更改。