javascript - 選択した行/行にはホバー状態があります

Question

私は<div id="middle" class="fl"> 次のように表を作成しました:! フィドル: http://jsfiddle.net/qqmhao/e2N4e/1/

今、私はこれらをしなければなりません:

• 行にはホバー状態があります
• チェックボックスなしで行を選択できます
• 複数の行を選択できます

高度なヘルプに感謝します!!

Answer 1

クリック可能な行:

$('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 でチェックボックスが有効になっている行を強調表示するなどです。しかし、あなたは要点を理解します。