选定的行/行具有悬停状态

Question

我已经在<div id="middle" class="fl">做了一张桌子 它看起来像这样：！ 小提琴中：http://jsfiddle.net/qqmhao/e2N4e/1/

现在我必须这样做：

• 行具有悬停状态
• 可以选择不带复选框的行
• 可以选择多行

任何帮助都非常感谢！

Answer 1

试试这个

此代码可能对您有所帮助 => 在 tr 上单击，如果选中复选框，则取消选中它，否则检查它

对于tr悬停效果你可以写css

http://jsfiddle.net/e2N4e/6/

    $('table tr').click(function(){
  if(!$(event.target).is(":checkbox"))
  {

        if($(this).find('[type="checkbox"]').is(':checked')){
            $(this).find('[type="checkbox"]').prop('checked',false)
            $(this).removeAttr('style');
        }
       else{
         $(this).find('[type="checkbox"]').prop('checked',true)

         $(this).css('background', 'yellow');
    }
}
    })

<style>
table tr:hover{
    background:yellow;

}
</style>

Answer 2

可点击的行：

$('table').on('click', 'tr', function() {
    var $row = $(this);
    var $checkbox = $row.find('[type=checkbox]');
    $checkbox.click();
});

可悬停的行：

tr:hover {
    background-color: grey;
}

启用状态：

$('table').on('click', '[type=checkbox]', function(e) {
    var $checkbox = $(this);
    var $row = $checkbox.parents('tr');
    e.stopPropagation(); // Prevents the other click handler from being called
    if($checkbox.prop('checked')) {
        $row.addClass('checked');
    } else {
        $row.removeClass('checked');
    }
});

启用状态 CSS：

tr.checked {
    background-color: cyan;
}

显然，这需要更多的工作 - 例如突出显示在 HTML 中启用了复选框的行。但你明白了要点。