How to insert a table row at a given location?

  • 0
    There is a table generated using JS. It contains rows of the top level with the id "newRow *". These lines have a button that creates child rows with the id "row *". The problem is as follows. If you use insertBefore element.nextSibling, then inserts immediately after the top-level row without problems. However, I need to insert after - something like lastSibling, but in this case, the new row is simply added to the end of the table, regardless of other top-level rows. Is there some way to force child rows to be inserted only after their parent. I understand that all of them are just & lt; tr & gt; tags, that is, they are not, in fact, descendants and parents. But still, can anyone decide such a question?

    <thead>
        <tr>
          <th>Fabric</th>
          <th>Level</th>
          <th>Link</th>
          <th>Description</th>
          <th>Require</th>
          <th>Actions</th>
      </tr></thead>
      <tbody id="table">
        <tr class="hidden" id="row">
          <td></td>
          <td>1</td>      
          <td><input id="imageLink" placeholder="Input"></td>
          <td class="output"><textarea id="description"></textarea></td>
          <td class="output"><input id="require" type="checkbox"></td>
          <td></td>
        </tr>
      <tr class="" id="newRow1">
          <td>1</td>
          <td>1</td>      
          <td><input id="imageLink1" placeholder="Input"></td>
          <td class="output"><textarea id="description1"></textarea></td>
          <td class="output"><input id="require1" type="checkbox"></td>
          <td><a href="javascript:void(0);" onclick="deleteRow(this);">Delete</a>&nbsp;<a href="javascript:void(0);" onclick="insParent(1,1)">Parent</a></td>
        </tr>
    <tr id="row2"><td>2</td><td>2</td><td>SL_B</td>
     <td><input name="slOptions[User][NOC M1B]" class="form-control" id="User1" type="text"></td>
     <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>
    <tr id="row3"><td>3</td><td>2</td><td>SL_C</td> <td><input name="slOptions[User][NOC M1C]" class="form-control" id="User1" type="text"></td> 
    <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>
     <tr class="" id="newRow4">
          <td>4</td>
          <td>1</td>      
          <td><input id="imageLink4" placeholder="Input"></td>
          <td class="output"><textarea id="description4"></textarea></td>
          <td class="output"><input id="require4" type="checkbox"></td>
          <td><a href="javascript:void(0);" onclick="deleteRow(this);">Delete</a>&nbsp;<a href="javascript:void(0);" onclick="insParent(4,1)">Parent</a></td>
        </tr>
    <tr id="row5"><td>5</td><td>2</td><td>SL_D</td> 
    <td><input name="slOptions[User][NOC M1D]" class="form-control" id="User1" type="text"></td> <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr></tbody>
    JavaScript Iris McLean, Jun 23, 2020

  • 1 Answers
  • 0
    insertAdjacentHTML
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!