使用jQuery選中行高亮顯示

在網(wǎng)頁開發(fā)中，我們常常需要在表格或列表中選中某一行進行操作，這時候就需要用到j(luò)Query選中行高亮顯示的功能。

具體實現(xiàn)方法如下：

$('tr').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});

以上代碼的意思是當表格中的某一行被點擊時，給該行添加選中效果，并且將其他行的選中效果去掉。

要使效果更加美觀，我們需要自己添加一些樣式。請看以下代碼：

.selected{
background-color: #38c;
color: #FFF;
}

以上代碼中，我們設(shè)置被選中的行的背景顏色為深藍色，字體顏色為白色。

需要注意的是，我們給每一行添加click事件可能會對性能造成影響。如果表格的行數(shù)較多，建議使用事件委托，即將click事件綁定在表格的父元素上，然后通過事件冒泡機制來實現(xiàn)。

$('table').on('click', 'tr', function(){
$(this).addClass('selected').siblings().removeClass('selected');
});

以上代碼中，我們將click事件綁定在table元素上，然后通過事件委托來處理每個tr元素的點擊事件。

這樣，我們就可以實現(xiàn)非常好看、高效的選中行高亮顯示功能了。