Add row and td element and a checkbox in the table

Question

I have the following table structure

<form method=POST  class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]'  size='60'  value='10'  /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]'  size='60'  value='Aa'  /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td  class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>

The row that I am trying to add should have the following html:

<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>

I have the following Javascript / jQuery code:

var trCnt=0;
                $('table tr').each(function(){
                    trCnt++;
                });
                rowToInsertCheckbox = trCnt - 1;
                
                $('table').after(rowToInsertCheckbox).append(
                    $(document.createElement('tr')),
                    $(document.createElement('td').html('Delete the record'),
                    $(document.createElement('td').html('Checkbox here?')),
                );

which does find the right row after which the insert should be done, but the code does not work.

Rory McCrossan · Accepted Answer · 2021-01-08 14:03:50Z

after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.

To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:

let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
  <table>
    <tr>
      <th>Code:</th>
      <td><input type="text" name="f[id]" size="60" value="10" /></td>
    </tr>
    <tr>
      <th>Name:</th>
      <td><input type="text" name="f[name]" size="60" value="Aa" /></td>
    </tr>
    <tr>
      <td class="nogrid buttonsClass"><button type="submit">Save</button></td>
    </tr>
  </table>
</form>

Giorgos Betsos · Accepted Answer · 2021-01-08 14:24:26Z

One way to locate the row after which the content should be added is:

 var tr = $("th").filter(function () {
                return $(this).text() == "Name:";
            }).closest("tr");

Then add the row:

$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");

$(document).ready(function() {

  var tr = $("th").filter(function() {
    return $(this).text() == "Name:";
  }).closest("tr");

  $(tr).after("<tr><th>Delete the record?</th>" +
    "<td><input type='checkbox' name='delete' value=1></td>" +
    "</tr>");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
  <table>
    <tr>
      <th>Code:</th>
      <td><input type='text' name='f[id]' size='60' value='10' /></td>
    </tr>
    <tr>
      <th>Name:</th>
      <td><input type='text' name='f[name]' size='60' value='Aa' /></td>
    </tr>

    <tr>
      <td class=' nogrid buttonsClass'><button type=submit>Save</button>
      </td>
    </tr>
  </table>
</form>

Collectives™ on Stack Overflow

Add row and td element and a checkbox in the table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related