Insert a row in a table based on a value of another row with user input

Question

I'm trying to find a way to insert a row in a table based on a value that the user inputs and if that value exists in the table. For example, the table will have 10 rows. The user would like to add a row beneath row number 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> 

After clicking on the "Add Line" button and typing 8, it will look for row number 8 and insert a row beneath it also naming it row 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"/>'; 

I've only been able to add a row to the very bottom of the table after prompting the user for input. I know I can specify where the row is inserted using the code I commented out. The obvious problem is that the position where it will insert the new row will change if the user adds more than one line. I fear I may be overthinking it, any thoughts?

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

Answer 1

You can do it this way:

<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>

See it working here: https://jsfiddle.net/p01r7sjb/1/