選定的行/行具有懸停狀態

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

Hoverable行：

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中啓用。但你明白了。