我有下表,其中包含每行的复选框。当复选框状态更改(选中/取消选中)时,相应的行需要以黄色突出显示。我们如何使用jQuery实现它?
注意:我使用的是 jQuery 1.4.1 ?不支持“on”。
注意:我正在尝试学习jQuery。请不要建议任何第三方插件。我试图通过手工编码来学习它。
<html>
<table class="commonGrid" cellspacing="0" id="detailContentPlaceholder_grdGarnishmentState"
style="border-collapse: collapse;">
<thead>
<tr>
<th scope="col">
<a >
Country Code</a>
</th>
<th scope="col">
<a >
State</a>
</th>
<th scope="col">
Independent Order Status
</th>
<th scope="col">
Standard Order Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
USA
</td>
<td>
<span id="detailContentPlaceholder_grdGarnishmentState_lblState_0">Alaska</span>
</td>
<td>
<span class="independantOrder">
<input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_0"
type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkIndependentOrderStatus"
checked="checked" /></span>
</td>
<td>
<span class="standardOrder">
<input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_0"
type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkStandardOrderStatus"
checked="checked" /></span>
</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
USA
</td>
<td>
<span id="detailContentPlaceholder_grdGarnishmentState_lblState_1">Arkansas</span>
</td>
<td>
<span class="independantOrder">
<input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_1"
type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkIndependentOrderStatus" /></span>
</td>
<td>
<span class="standardOrder">
<input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_1"
type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkStandardOrderStatus"
checked="checked" /></span>
</td>
</tr>
</tbody>
</table>
</html>
答案 0 :(得分:3)
由于每个人都忽略了你对jQuery 1.4.1的使用,这里有一个可行的例子:
http://jsfiddle.net/applehat/F63Aj/1/
$("input:checkbox").click(function ()
{
if($(this).is(':checked'))
{
$(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
$(this).parents("tr:first").css('background-color', 'yellow');
}
else
{
$(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'));
}
});
您会注意到JSFiddle链接不包含jQuery 1.3 - 所以如果它适用于1.3,它应该可以轻松地在1.4.1上工作。
答案 1 :(得分:2)
试试这个:
http://jsbin.com/ozarov/3/edit
这也会以交替的方式保存行背景颜色......
$("table").on("click", ":checkbox", function ()
{
if($(this).is(':checked'))
{
$(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
$(this).parents("tr:first").css('background-color', 'yellow')
}
else
{
$(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'))
}
});
P.S。你可以根据2个选中的复选框详细说明我的样本......
答案 2 :(得分:1)
基于您的笔记等的假设:当复选框更改时,突出显示黄色的行。
$("table").on("change", ":checkbox", function() {
$(this).parents("tr:first").css('background-color','yellow');
});
效果:如果行复选框发生更改,则会突出显示。注意:一旦用黄色突出显示,切勿改为不亮。
编辑:您可以使用CSS中的突出显示类,例如.highlight{background-color:yellow;}
,但是,在第二行,您需要删除嵌入其中的背景颜色样式,因为它更“特定”并且将始终覆盖该类添加了.addClass('highlight');
以前版本的更改事件处理程序的语法:
$("table").find(':checkbox').change( function() {
$(this).parents("tr:first").css('background-color','yellow');
});
用于动态元素添加的较慢.live处理程序:
$("table").find(':checkbox').live('change', function() {
$(this).parents("tr:first").css('background-color','yellow');
});
EDIT2:从1.4.1到1.4.4,有很多事件管理变更。
似乎更改事件未正确触发1.4.1 - 仅在第二次更改时触发。因此,请改为使用click事件:
jQuery('input').click(function() {
jQuery(this).parents("tr:first").css('background-color', 'yellow');
});
这里的工作示例:http://jsfiddle.net/vW9vQ/1/
BROKEN。兑换测试:http://jsfiddle.net/vW9vQ/
强烈建议您更新当前版本的jQuery。