0

我有下表，其中包含每行中的复选框。当复选框状态发生变化（选中/未选中）时，相应的行需要以黄色突出显示。我们如何使用 jQuery 来实现它？

注意：我使用的是jQuery 1.4.1吗？不支持“开”。

注意：我正在尝试学习 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>
4

3 回答 3

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。

于 2012-05-17T13:11:26.970 回答
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'))
     }
 });

ps您可以根据2个选中的复选框来详细说明我的示例...

于 2012-05-17T12:30:36.147 回答
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 - 仅在第二次更改时触发。所以，请改用点击事件：

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-17T12:52:26.090 回答