[英]How to add new table row?
I am trying to create new rows when a checkbox is clicked. 单击复选框时,我试图创建新行。 I have tried using
.after()
and .insertAfter()
to no avail. 我已经尝试使用
.after()
和.insertAfter()
无济于事。
Can someone please point me in the right direction? 有人可以指出正确的方向吗?
http://jsfiddle.net/uf0jhd9w/c http://jsfiddle.net/uf0jhd9w/c
HTML: 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: 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();
}
});
Got your answer. 得到你的答案。
Please refer this Fiddle: http://jsfiddle.net/mayurRahul/frpnsnpv/ 请参阅此提琴: http : //jsfiddle.net/mayurRahul/frpnsnpv/
HTML: 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: 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();
}
});
Make sure you select the good element when you add your row ( see answers from this link ). 添加行时,请确保选择好元素( 请参见此链接的答案 )。 Add an ID to your table.
在表中添加一个ID。
<table id="myTable">
<thead>
<!-- Table headers -->
</thead>
<tbody>
<!-- Table contents -->
</tbody>
</table>
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
在最后一个“ tr”之后添加行
$("#table tr:last").after("<tr><td>cell</td></tr>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.