Question

我正在尝试找到一种方法，根据用户输入的值以及表中是否存在该值，在表中插入行。例如，该表将有10行。用户希望在第8行下添加一行。Please see screenshot.

<form>
  <table class="myTable" id="myTable">
    <tr>
      <th class="myTable th">PALLET #</th>
      <th class="myTable th">CASE COUNT</th>
      <th class="myTable th">HILLTOP LOT #</th>
      <th class="myTable th">SSCC (LAST 4)</th>
    </tr>
    <?php 
      for ($x=1 ; $x <=2 4; $x++) { 
      echo 
        '<tr>
         <td style="font-size: 160%" id="pallet">' .$x. '</td>
         <td id="caseCount"><input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/></td>
         <td id="hilltopLot"><input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/></td>
         <td id="sscc"><input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/></td>
         </tr>'; 
    } 
   ?>
  </table>

单击“添加行”按钮并键入8后，它将查找第8行并在其下方插入一行，并将其命名为第8行。

  <br />
  <br />
  <p class="center">
    <input type="submit" value="Submit" name="submit" class="blueButt_Big" />&nbsp&nbsp
    <input class="blueButt_Big" type="button" value="Cancel" onclick="parent.location='view_prodLine.php'" />&nbsp&nbsp
    <input class="blueButt_Big" type="button" value="Add Line" onclick="addLine()" />&nbsp&nbsp
    <input class="blueButt_Big" type="button" value="Delete Line" onclick="myDeleteFunction()" />
</form>
<script>
  function addLine() {
    var person = prompt("Please enter the pallet number");
    if (person != null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      cell1.innerHTML = person;
      cell2.innerHTML = '<input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/>';
      cell3.innerHTML = '<input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/>';
      cell4.innerHTML = '<input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/>';

在提示用户输入后，我只能在表格的最底部添加一行。我知道我可以使用我注释掉的代码指定插入行的位置。显而易见的问题是，如果用户添加多行，它将插入新行的位置将发生变化。我担心我可能会过度思考它，任何想法？

      //var x = document.getElementById("myTable").rows[22].cells;
      //x[0].innerHTML = person;
    }
  }

  function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(-1);
  }
</script>

Answer 1

你可以这样做：

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<input type="number" id="RowNumber"/>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {

    var RowNumber = document.getElementById("RowNumber").value;

    var table = document.getElementById("myTable");
    var row = table.insertRow(RowNumber);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}
</script>

看到它在这里工作： https://jsfiddle.net/p01r7sjb/1/

基于具有用户输入的另一行的值在表中插入行

1 个答案: