Question

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

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

<input type="checkbox" name="MultiPointInspection" id="MultiPointInspection" class="MultiPointInspection" value="<?php echo $MultiPointInspection; ?>" onKeyPress="return disableEnterKey(event)" rel="Multi Point Vehicle Inspection" />&nbsp;Multi Point Vehicle Inspection<br />
<input type="checkbox" name="TireRotationandBrake" id="TireRotationandBrake" class="TireRotationandBrake" value="<?php echo $TireRotationandBrake; ?>" onKeyPress="return disableEnterKey(event)" />&nbsp;Tire Rotation and Brake Inspection<br />

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

这是上表：

<table id="atable" class="atable">
<tr>
<td>Description</td><td>Stocked</td><td>Quantity</td><td>Part Price</td><td>Hours</td><td>Rate Class</td><td>Total</td><td>Approved</td><td>Remove Row</td></tr>
<tr class="dynamic_row">
<td><input name="description[]" id="description" value="<?php echo $description; ?>" size="55" class="numeric add_to_total description" onKeyPress="return disableEnterKey(event)" />
</td><td align="center"><input type="checkbox"  name="stocked[]" id="stocked" value="<?php echo $stocked; ?>" size="5" class="numeric add_to_total" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="quantity[]" id="quantity" value="<?php echo $quantity; ?>" size="5" class="numeric add_to_total quantity" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="partPrice[]" id="partPrice" value="<?php echo $partPrice; ?>" size="10" class="numeric add_to_total part" onKeyPress="return disableEnterKey(event)" />
</td><td><input name="hours[]" id="hours" value="<?php echo $hours; ?>" size="10" class="numeric add_to_total hours" onKeyPress="return disableEnterKey(event)" />
</td><td><select name="rate[]" id="rate" class="numeric add_to_total rate" onKeyPress="return disableEnterKey(event)">
<?php
    //get rate options from database
?>
</select>
</td><td><input name="total[]" id="total" size="10" class="numeric is_total" readonly="readonly" onKeyPress="return disableEnterKey(event)" />
</td><td align="center"><input type="checkbox" name="approved[]" id="approved" class="add_to_total approved" checked="checked" value="<?php echo $approved; ?>" size="10" onKeyPress="return disableEnterKey(event)" />
</td><td align="center"><img src="img/x.png" width="25" height="25" id="removeButton" title="Remove Row" class="delRow" />
</td></tr>
<img src="img/plus.png" width="25" height="25" id="btnAddRow" title="Add New Row" class="alternativeRow" />    
</table>

我正在使用jQuery Table AddRow plugin。我已经使用下面的代码来添加行，这很好（虽然我没有得到我漂亮的交替行），但它也将行添加到底部，在我的＆＃34下面;添加行＆＃ 34;按钮，所以我也在寻找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();
});

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

我已经创建了一个fiddle，其中包含问题的基本设置（请注意，javascript包含完整的jQuery Table AddRow插件代码），并且非常感谢能够帮助我完成这项工作。

谢谢。

Answer 1

我建议改用change。尝试像

这样的东西

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

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

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

1 个答案: