jQuery - thay đổi màu hàng của bảng khi di chuột, nhận các sự kiện di chuột để làm việc

Question

Tôi muốn làm nổi bật hàng của bảng bằng cách thay đổi màu của nó bằng cách sử dụng jQuery. Đã RTFM'd, thử nghiệm và nghiên cứu rộng rãi với ít may mắn.

HTML:

<table id="waypointsTable" border="1"> 
<tbody> 
<tr> 
<td>some text</td> 
</tr> ... 

javascript:

$('#waypointsTable > tbody > tr > td').hover(function() { 
    alert(1); 
}, function() { 
    alert(2); 
}); 

Tại thời điểm này, tôi chỉ cố gắng để có được những chức năng di chuột để bắn. Nên di chuột được gắn với tr hoặc td? Tôi có luôn phải bao gồm tham chiếu tbody khi chọn các hàng trong bảng và của td không? Tốt hơn là đặt một lớp trên mỗi tr hoặc td thay vì cách tiếp cận trên?

Cảm ơn.

Answer 1

Có vẻ tốt cho hầu hết các phần, nếu bạn muốn kích hoạt cho mỗi hàng, bạn có thể liên kết trực tiếp với tr.

chỉ:

$('#waypointsTable tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}); 

(mã đầy đủ tại http://jsfiddle.net/nicholasstephan/8nbVG/)

nên làm việc ...

Đối với trường hợp này đặc biệt, sử dụng một css: hover selector giả sẽ thực hiện công việc quá.

#waypointsTable tr:hover { 
    background-color:yellow; 
} 

Answer 2

Không chắc chắn, nhưng hãy thử đặt một div với một lớp hoặc id bên trong và xem điều đó có hữu ích không.

Answer 3

Nếu bạn muốn thay đổi màu của hàng khi nó được di chuột qua, sau đó đặt: di chuột trên hàng. Tuy nhiên, lưu ý rằng hàng mình không thể có màu nền, chỉ có các tế bào, vì vậy về CSS, bạn cần dùng cái này:

tr td { background: normal background style here } 
tr:hover td { background: hovered background style here} 

Answer 4

này sẽ thêm và loại bỏ các css, nhưng điều này sẽ không làm điều này cho hàng trên cùng của bảng. ví dụ. hàng tiêu đề của bạn.

$("#waypointsTable tr").not(':first').hover(function(){ 
$(this).addClass("tr-hover"); 
    },function(){ 
    $(this).removeClass("tr-hover"); 
    } 
); 

Answer 5

<script type="text/javascript"> 

$("tr").not(':first').hover(
    function() { 
    $(this).css("background","yellow"); 
    }, 
    function() { 
    $(this).css("background",""); 
    } 
); 

</script> 

Demo

Answer 6

Nếu bạn muốn kích hoạt sự kiện này cho tương lai thêm hàng bạn có thể sử dụng

$("#table_id").on("mouseover", 'tr' function() { 
    //stuff to do on mouseover 
}); 

Answer 7

Một cách khác

$('#waypointsTable tr').hover(function() { 
      $(this).toggleClass('hover'); 
    }); 

css phong cách

.hover { 
    background-color:green; 
} 

Answer 8

Đây là một số liên kết hữu ích.Đối với nhiều tham chiếu và demo xem liên kết bên dưới.

jQuery Change table row color on hover, getting hover events to work

JS:

$(function() { 
    $("tr:not(:has(th))").mouseover(function() { 
     $(this).addClass("hover"); 
    }); 
    $("tr:not(:has(th))").mouseleave(function() { 
     $(this).removeClass("hover"); 
    }); 
}); 

CSS:

.hover 
    { 
     background-color: #81B441; 
    } 

HTML:

<table class="tblBorder" border='1'> 
<tr class="hover"><th>No</th><th>Page Name</th><th>No of View</th><th>Comments</th></tr> 
<tr><td>1</td><td>Java Script</td><td>28</td><td>10</td></tr> 
<tr><td>2</td><td>CSS</td><td>29</td><td>78</td></tr> 
</table>