Question

我有以下html / jQuery代码，并且在单击复选框时尝试突出显示表格中的一行，但不幸的是，我似乎无法实现目标。

如果有人可以请求协助，我会很感激，因为我似乎无法看到我做错了什么。

见下面的代码。

感谢。

    <style type="text/css">
.highlight {
    background-color: yellow;
}
</style>

<tr>
  <td class="t12datavalue" align="center" style=""><input type="checkbox" value="123" name="f01"></td>
  <td class="t12datavalue" style="">123</td>
  <td class="t12datavalue" style="">333</td>
  <td class="t12datavalue" style="">Alex</td>
  <td class="t12datavalue" style="">Smith</td>
</tr>

＆LT;

script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parent().parent().addClass('highlight');
        } else if($(this).parent().is('.highlight')) {
             $(this).parent().parent().removeClass('highlight');
        }
    }); 
  }); 
</script>

Answer 1

对其他答案中的想法进行了改进：

$('td :checkbox').bind('change click', function () {
    $(this).closest('tr').toggleClass('highlight', this.checked);
}).change();

我绑定change和click事件的原因是因为change错误地在复选框在IE中失去焦点后触发，而click不会在键盘上触发事件

我使用.toggleClass with a switch，以确保突出显示与复选框状态保持同步，尽管处理程序被触发两次（一次来自change，一次来自{{1} }}）。

最后，我立即触发click事件，以便在DOM就绪时正确应用这些类。

Answer 2

修改： The request by tonsils。

编辑： Box9 topped this无论如何。聪明的恶魔。

看看this jsFiddle。 Bam，我们有颜色突出和甜蜜，简短的jQuery。

如果你不想点击，这里是前面提到的性感jQuery：

$(document).ready(function() {
    $('td :checkbox').change(function() {
        $(this).closest('tr').toggleClass('highlight');
    }); 
});

Answer 3

的jQuery

$('td :checkbox').change(function() {
    var parentTr = $(this).closest('tr');
    if (this.checked){
       parentTr.addClass('highlight');
    } else {
       parentTr.removeClass('highlight');
    }
});

不应该明确检查该类是否在tr上，如果该类不存在，removeClass()将无声地失败。

我考虑过建议toggleClass()，（all these answers are wrong, apparently），但是如果这些复选框中的任何一个设置为默认或以编程方式检查，我只是覆盖边缘情况，那么它将不同步（我忘记了第二个论点：P）。

然而，box9 has the best answer，所以投票。：）

CSS

tr.highlight td {
    background: yellow;
}

tr的{{1}}不可见，您必须将其应用于孩子background。

jsFiddle

Answer 4

$('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parents('tr:eq(0)').addClass('highlight');
        } else {
             $(this).parents('tr:eq(0)').removeClass('highlight');
        }
    });

Answer 5

您唯一的问题是<tr>不在<table>。如果你添加它，它可以很好地工作。

P.S。我将$(this).parent().parent()替换为$(this).parents("tr")。

$(document).ready(function() {
  $('td input:checkbox').click(function() {
    if ($(this).is(':checked')){
      $(this).parents("tr").addClass('highlight');
    } else if($(this).parents("tr").is('.highlight')) {
      $(this).parents("tr").removeClass('highlight');
    }
  }); 
});

Answer 6

如果你想按照上面的例子，你实际上错过了一个额外的父（）：

$（document）.ready（function（）{ $（'td input [type =“checkbox”]'）。click（function（）{ if（$（this）.is（'：checked'））{ 。$（本）.parent（）父（）父（）addClass（ '亮点'）。 } else if（$（this）.parent（）。parent（）。parent（）。is（'。highlight'））{ $（本）.parent（）父（）父（）removeClass（ '亮点'）。; } }）; }）;

注意：您可以在元素上使用.html（）jquery函数来确定它们包含的内容。就我而言，我用过这个：

警报（$（本）.parent（）的父（）的父（）HTML（）...）;

突出显示表中的行

6 个答案:

的jQuery

CSS