根据用户输入的另一行的值在表中插入一行

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/