在复选框上添加动态行和数据单击

我再一次遇到jQuery问题，我希望得到一些帮助。

我有一系列看起来像这两个的复选框：

<input type="checkbox" name="MultiPointInspection" id="MultiPointInspection" class="MultiPointInspection" value="" onKeyPress="return disableEnterKey(event)" rel="Multi Point Vehicle Inspection" /> Multi Point Vehicle Inspection
 <input type="checkbox" name="TireRotationandBrake" id="TireRotationandBrake" class="TireRotationandBrake" value="" onKeyPress="return disableEnterKey(event)" /> Tire Rotation and Brake Inspection
 

我想要做的是向前一个表添加一个新的动态行（我已经可以使用单独的按钮），但在这种情况下，添加名称，id或类名（这些都与上面的相同） ）当单击其中任何一个时，作为该行中的文本框值。 我还希望它们在没有被取消时删除，但它们并不总是最后一行，所以：last不适合我。

这是上表：

 
 
 
Description
Stocked
Quantity
Part Price
Hours
Rate Class
Total
Approved
Remove Row
 
 
<input name="description[]" id="description" value="" size="55" class="numeric add_to_total description" onKeyPress="return disableEnterKey(event)" /> 
<input type="checkbox" name="stocked[]" id="stocked" value="" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" /> 
<input name="quantity[]" id="quantity" value="" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" /> 
<input name="partPrice[]" id="partPrice" value="" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" /> 
<input name="hours[]" id="hours" value="" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" /> 
   
 
<input type="checkbox" name="approved[]" id="approved" class="add_to_total approved" checked="checked" value="" size="10" onKeyPress="return disableEnterKey(event)" /> 
 
   

我正在使用jQuery Table AddRow插件 。 我已经使用下面的代码来添加行，这很好（虽然我没有得到我漂亮的交替行），但它也将行添加到底部，在我的“添加行”按钮下面，所以我’我也在寻找appendTo（）的解决方案，而宁愿将它添加到最后一行的上方：

 $("#MultiPointInspection,#TireRotationandBrake").on('click', function() { if ($(this).prop("checked")) { $('#atable .dynamic_row:first').clone().appendTo("#atable"); } else { $('#atable .dynamic_row:last').remove(); } }); 

这是在另一个按钮单击上添加行的常规代码：

 $("document").ready(function(){ $(".alternativeRow").btnAddRow({oddRowCSS:"oddRow",evenRowCSS:"evenRow"}); $(".delRow").btnDelRow(); }); 

好像我的要求不够，我还想做的就是没有为这些行添加最后一列。 最后一列包含一个删除行的链接，我只想在取消选中该复选框时删除该行。

我已经创建了一个问题基本设置的小提琴 （请注意javascript包含完整的jQuery Table AddRow插件代码），并且非常感谢我可以通过这项工作获得的任何帮助。

谢谢。

Answer 1

我建议改用。 尝试类似的东西

 $("#MultiPointInspection,#TireRotationandBrake").on('change', function() { if ($(this).is(':checked')) { $(' ').appendTo("#atable"); } else { $('input#'+$(this).attr("id")+'[type="text"]').remove(); } }); 

小提琴： http ： //jsfiddle.net/dz2PR/1/