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

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 中启用了复选框的行。但你明白了要点。