jquery - 突出显示表格中的行

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>

<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();

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

我使用 .toggleClass with a switch因此尽管处理程序被触发两次(一次来自 change，一次来自 click)，但高亮保证与复选框状态同步。

最后，我立即触发 change 事件，以便在 DOM 准备就绪时正确应用类。