How to add new table row?

Question

I am trying to create new rows when a checkbox is clicked. I have tried using .after() and .insertAfter() to no avail.

Can someone please point me in the right direction?

http://jsfiddle.net/uf0jhd9w/c

HTML:

 <tr class="itemSize">
        <td>
          <span class="danger">*</span><label for="itemSize">Product Sizes:</label>
        </td>
        <td>
          <label for="extra_small">XS</label><input type="checkbox" name="extra_small" id="extra_small" value="XS">
          <label for="small">S</label><input type="checkbox" name="small" id="small" value="S">
          <label for="medium">M</label><input type="checkbox" name="medium" id="medium" value="M">
          <label for="large">L</label><input type="checkbox" name="large" id="large" value="L">
         </td>
      </tr>

jQuery:

$('#extra_small,#small,#medium, #large, #extra_large').on('change',function(){
    var $sizeTr = $('.itemSize');
    if(this.checked){
      console.log("checked");
      var size = $(this).attr("id");
      var html = 
      '<tr class="'+size+'_quantity">'+
       '<td>'+
          '<span class="danger">*</span><label for="itemQuantity">'+size+' Stock Quantity:</label>'+
        '</td>'+
        '<td>'+
          '<input type="number" min="1" name="itemQuantity" placeholder="Enter Product Quantity" value=""/>'+
        '</td>'+
      '</tr>';
      //$('.itemSize').after(html);
      $(html).insertAfter($sizeTr);
      //console.log( $(html));
    }else{
      $('tr.'+size+'_quantity').hide();
    }
  });

Works for me once you have a complete table to work with (i.e you left out the `...
` tags) http://jsfiddle.net/j08691/uf0jhd9w/2/ — j08691, Sep 17 '14 at 19:46
Thanks, I did some digging around and found my bug. I had to take var size = $(this).attr("id"); out of the if statement and it started working for me! — user875139, Sep 17 '14 at 19:59

score 1 · Answer 1 · edited Sep 17 '14 at 20:34

Got your answer.

Please refer this Fiddle: http://jsfiddle.net/mayurRahul/frpnsnpv/

HTML:

 <tr class="itemSize">
        <td>
          <span class="danger">*</span><label class="itemSize">Product Sizes:</label>
        </td>
        <td>
          <label for="extra_small">XS</label><input type="checkbox" name="extra_small" id="extra_small" value="XS">
          <label for="small">S</label><input type="checkbox" name="small" id="small" value="S">
          <label for="medium">M</label><input type="checkbox" name="medium" id="medium" value="M">
          <label for="large">L</label><input type="checkbox" name="large" id="large" value="L">
         </td>
      </tr>

JavaScript:

$('#extra_small,#small,#medium, #large, #extra_large').on('change',function(){
    var $sizeTr = $('.itemSize');
    if(this.checked){
      console.log("checked");
      var size = $(this).attr("id");
      var html = 
      '<tr class="'+size+'_quantity">'+
       '<td>'+
          '<span class="danger">*</span><label for="itemQuantity">'+size+' Stock Quantity:</label>'+
        '</td>'+
        '<td>'+
          '<input type="number" min="1" name="itemQuantity" placeholder="Enter Product Quantity" value=""/>'+
        '</td>'+
      '</tr>';
      //$('.itemSize').after(html);
      $(html).insertAfter($sizeTr);
      //console.log( $(html));
    }else{
      $('tr.'+size+'_quantity').hide();
    }
  });

Yep, I saw that. Thanks for expanding your answer. – JasonMArcher Sep 17 '14 at 21:02 — JasonMArcher, Sep 17 '14 at 21:02

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

Make sure you select the good element when you add your row (see answers from this link). Add an ID to your table.

<table id="myTable">
    <thead>
        <!-- Table headers -->
    </thead>
    <tbody>
        <!-- Table contents -->
    </tbody>
</table>

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

edited May 23 '17 at 12:29

Community

1
1

answered Sep 17 '14 at 19:48

Cyril Duchon-Doris

12,964
9
77
164

score 0 · Answer 3 · answered Sep 17 '14 at 19:49

0

To add row after last 'tr'

$("#table tr:last").after("<tr><td>cell</td></tr>");

answered Sep 17 '14 at 19:49

Joao Paulo

1,083
4
17
36

How to add new table row?

3 Answers3