Как добавить новую строку таблицы?

Question

Я пытаюсь создать новые строки, когда установлен флажок checkbox. Я пробовал использовать .after() и .insertAfter() безрезультатно.

Может кто-нибудь указать мне в правильном направлении?

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(); 
    } 
    }); 

Answer 1

Убедитесь, что вы выбрали хороший элемент, когда вы добавляете свою строку (see answers from this link). Добавьте идентификатор в таблицу.

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

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

Answer 2

Чтобы добавить строку после последнего 'тра'

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

Answer 3

Got вашего ответа.

Пожалуйста, обратитесь эту скрипку: 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(); 
    } 
    });