CODEWITHSUNDEEP
javascriptjquery
user525146
user525146

Reputation: 3998

inserting a row on click jquery

I am struggling to figure out why my code is not working. I have a table with a text field, 2 checkboxes and an add button in a row. I have 4 rows on load, I have a hyperlink when clicked should add a new row at the end of the table. My code is adding the row alternatively starting from the first row. My last row is 4 which I am cloning. The sequence I am getting when click on the link 1,4,2,4,3,4,4,4

I don't understand where I am making a mistake, I have been banging my head for this for last 4-5 hours

<table id="setting">
<tr><td><input name="name_1" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_2" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_3" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
<tr><td><input name="name_4" type="text" /></td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox" /> </td>
<td><input type="button" /></td></tr>
</table>

$('#add').on("click", function(e) {
     e.preventDefault();
     e.stopPropagation();
     $clone = $('#settings tbody tr').filter(":last").clone(true).insertAfter('#settings tbody tr').filter(":last").val('');

I tried this code below from one of the questions in stackoverflow. This one didn't work for me, i don't know why

$('#settings tbody tr:last').clone(true).insertAfter('#settings tbody>tr:last');
$('#settings tbody tr:last').val('');

Upvotes: 1

Views: 334

Answers (2)

Jai
Jai

Reputation: 74738

See you don't have tbody in the markup there but you are using in the jQuery:

<table id="setting">
   //<-----------------------missing tbody here
  <tr>
     <td><input name="name_1" type="text" /></td>
     .................

$('#<portlet:namespace />settings tbody tr:last')
      //--------------------------^^^^^------------its not there

Instead you can try this one:

$('#<portlet:namespace />settings tr:last')

Update:

 $('#settings tbody tr')
 //---------^-----------------this makes the mess

wrong id selected use setting instead settings:

 $('#setting tr:last-child').clone().insertAfter('#setting tr:last');

CHECKOUT THIS FIDDLE

Another update:

 $('#add').click(function (e) {
      var $cln = $('#setting tr:last-child').clone();
      $cln.find(':text').attr('id', 'textbox' + $('#setting tr:last-child').index()).val('');
      $cln.find(':checkbox').each(function (i, v) {
          $(this).attr('id', 'check' + $('#setting tr:last-child').index() + i).prop('checked', false);
      });
      $cln.find(':button').attr('id', 'btn' + $('#setting tr:last-child').index());
      $cln.insertAfter('#setting tr:last');
      console.log($cln.find(':text').attr('id') + '<===>' + $cln.find(':checkbox:eq(0)').attr('id') + '<===>' + $cln.find(':checkbox:eq(1)').attr('id'));
 });

Upvotes: 2

radu florescu
radu florescu

Reputation: 4363

$('#setting tr:last-child').insertAfter('<tr><td><input type="button" /></td></tr>');

or 

$('#setting tr:last-child').after('<tr><td><input type="button" /></td></tr>');

.after() Description: Insert content, specified by the parameter, after each element in the set of matched elements.

Check this fiddle out : jsfiddle and updated fiddle

$('#add').on("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('#setting tr:last-child').after('<tr><td><input name="name_4" type="text" /></td>td><input type="checkbox" /> </td><td><input type="checkbox" /> </td><td><input type="button" /></td></tr>');
    return false;
});

Upvotes: 1

Related Questions