jQuery：突出显示表格行上复选框更改事件

我有下表，其中包含每个行中的复选框。当复选框状态发生变化时（选中/取消选中），相应的行需要以黄色突出显示。我们如何使用jQuery实现它？我正在使用jQuery 1.4.1？ “on”不受支持。jQuery：突出显示表格行上复选框更改事件

注：我想学习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>

来源

2012-05-17 Lijo

你有2个checboxes ....如果两者都检查？ –

不得不喜欢那些ASP.NET Id morfs :) –

@MarkSchultheiss我一直在寻找一个cssclass把选择器或东西在身份证...但无法找到没有... :) –

假设：黄色，当一个复选框改变高亮显示一行。

$("table").on("change", ":checkbox", function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

影响：如果行复选框发生变化，它会突出显示。备注：一旦以黄色突出显示，切勿改为不突出显示。

编辑：你可以使用你的CSS中的高亮类，如.highlight{background-color:yellow;}但是，在第二行，你需要删除嵌入在那里的背景颜色样式，因为这是更“特定”，并将始终覆盖添加的类有变化的事件处理程序的.addClass('highlight');

以前的版本语法：

$("table").find(':checkbox').live('change', function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

：

$("table").find(':checkbox').change(function() { 
    $(this).parents("tr:first").css('background-color','yellow'); 
});

较慢的动态元素添加.live处理器210

编辑2：从1.4.1到1.4.4有很多事件管理变更。

看来改变事件并没有为1.4.1正确触发 - 只会引发第二次改变。 SO，使用click事件，而不是：

jQuery('input').click(function() { 
    jQuery(this).parents("tr:first").css('background-color', 'yellow'); 
});

工作示例这里：http://jsfiddle.net/vW9vQ/1/

BROKEN .change测试在这里：http://jsfiddle.net/vW9vQ/

强烈推荐更新到这个东西的jQuery的当前版本。

来源

2012-05-17 12:52:26

我如何使它在jQuery 1.4.1中工作？ “on”不受支持。 – Lijo

@Lijo - 我为1.4.1添加了一个静态内容和动态内容示例，它应该适合您。注意：编辑这些的第一篇文章的语法错误:( –

编辑的代码适用于1.4.4，但它在1.4.1中不能正常工作。src =“ajax.aspnetcdn.com/ajax/jquery/jquery-1.4 .1.js“;任何解决方法？ – Lijo

试试这个：

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')) 
    } 
});

附：您可以根据您的笔记等阐述基于2项选中的复选框我的样品...

来源

2012-05-17 12:30:36

谢谢。目前只有当我将一个未选中的框放入选中框时才会突出显示。它需要以任何方式工作 - 即。当我把一个复选框变成未勾选。我们该怎么做呢？ – Lijo

但它一直是黄色的.... ????? –

我如何使它在jQuery 1.4.1中工作？ “on”不受支持。 [一旦更改，它可以设置为黄色] – Lijo

因为大家都忽略了你对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链接uncluding的jQuery 1.3 - 所以，如果工作在1.3，它应该很容易在1.4.1工作。

来源

2012-05-17 13:11:26 Applehat

它可以很好地适用于1.4.4，但它在1.4.1中不能正常工作。src =“http ：//ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js“。任何解决方法？ – Lijo

''只需将它放在您的标题中。= P – Applehat

我不允许在我的项目中使用1.4.1以外的任何版本 – Lijo

jQuery：突出显示表格行上复选框更改事件

回答

相关问题