CODEWITHSUNDEEP
javascriptjqueryhtml-table
D.B.
D.B.

Reputation: 121

Add row and td element and a checkbox in the table

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.

Upvotes: 2

Views: 2466

Answers (2)

Giorgos Betsos
Giorgos Betsos

Reputation: 72185

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337626

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>

Upvotes: 3

Related Questions