在复选框上添加动态行和数据单击
Adding Dynamic Row and Data on Checkbox Click
我又遇到了一个jQuery问题,希望得到一些帮助。
我有一系列像这样的复选框:
<input type="checkbox" name="MultiPointInspection" id="MultiPointInspection" class="MultiPointInspection" value="<?php echo $MultiPointInspection; ?>" onKeyPress="return disableEnterKey(event)" rel="Multi Point Vehicle Inspection" /> Multi Point Vehicle Inspection<br />
<input type="checkbox" name="TireRotationandBrake" id="TireRotationandBrake" class="TireRotationandBrake" value="<?php echo $TireRotationandBrake; ?>" onKeyPress="return disableEnterKey(event)" /> Tire Rotation and Brake Inspection<br />
我想要做的是添加一个新的动态行到前一个表(我已经可以做一个单独的按钮),但在这种情况下,添加名称,或id或类名(这都是相同的每上面)作为一个文本框值在该行当这些被点击。我还希望它们在取消点击时被删除,但它们并不总是最后一行,所以:last并不适合我。
这是前一个表:
<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表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表AddRow插件代码),并将感谢任何帮助,我可以得到这个工作。
谢谢。
我建议使用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/
相关文章:
- 将单击事件添加到数据表
- 从单击的行上的列中获取数据
- 单击按钮时加载数据
- 单击鼠标,用MySQL数据填充html表单输入字段
- 单击函数仅对某些数据名称执行
- 单击文本时删除文本框的默认数据
- 基于类的单击事件在10行之后不响应-数据表
- 使用另一个模板上的单击事件从一个模板传递数据
- 单击一个数据表,填充第二个数据表
- 数据应该只显示与我单击的按钮有关的信息
- 单击按钮即可显示带有提取的json数据的表
- 如何在单击按钮时将页面中所有文本字段中的数据更改为大写
- 如何通过单击数据在新窗口上显示TableView数据
- 模态中的数据关闭在单击时被调用两次
- 当我单击它时,没有检查带有数据切换=选项卡的单选按钮
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 通过单击获取表单数据并使用Highchart中的数据进行图表
- j查询在设置属性后在后续单击时不读取数据属性
- 在复选框上添加动态行和数据单击
- 如何使用阵列中的特定数据-单击示例