jQuery - 懸停時更改表格行顏色，使懸停事件正常工作

我想通過使用jQuery更改其顏色來突出顯示錶格行。有RTFM'd，試驗和研究廣泛，運氣不大。jQuery - 懸停時更改表格行顏色，使懸停事件正常工作

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

在這一點上，我只是試圖讓懸停功能火災。懸停應該與tr還是td綁定？選擇表格行和td時，是否總是必須包含tbody參考？在每個tr或td上放一個班級而不是上面的方法會更好嗎？

謝謝。

來源

2011-11-01 bethesdaboys

你希望它觸發每行或每個單元？ – Purag

大部分看起來很好，如果你想觸發每一行，你可以直接綁定到tr。

剛：

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

（全碼在http://jsfiddle.net/nicholasstephan/8nbVG/）

應該工作...

對於這種情況而言，使用CSS：hover僞選擇會做的工作太多。

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

來源

2011-11-01 18:35:34 nicholas

謝謝！省略'>'後代操作符，正如你所做的那樣，使我的代碼工作。此外，我正在尋找一個更好的模式來突出顯示行 - 我一直在使用jQuery的css函數，並取得了有限的成功。 – bethesdaboys

-1

不確定，但嘗試把一個類或ID內的div，看看是否有幫助。

來源

2011-11-01 18:33:14 rogerlsmith

應該已經在TD裏面了... – rogerlsmith

如果要在行懸停時更改行的顏色，請將：hover放在行本身上。但是，請注意行本身不能有背景顏色，只有細胞，所以在CSS方面，你需要這樣的：

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

來源

2011-11-01 18:36:12

向TR添加背景色只是IE中的一個問題。請參閱http://mashable.com/2009/07/16/ie6-must-die/和http://ie8-must-die.com/。 – nicholas

這將添加和刪除的CSS，但是這不會爲做到這一點頂級的錶行。例如您的標題行。

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

來源

2011-11-01 18:37:46 Cams

<script type="text/javascript"> 

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

</script>

Demo

來源

2013-08-01 11:41:39 bpbhat77

如果你想爲未來添加的行觸發事件，你可以使用

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

來源

2014-01-20 15:28:46 obotezat

另一種方式

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

css樣式

.hover { 
    background-color:green; 
}

來源

2014-04-02 04:52:22

下面是一些有用的links.For 更多的參考和演示看到下面的鏈接。

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>

來源

2015-04-25 06:30:47

jQuery - 懸停時更改表格行顏色，使懸停事件正常工作

回答

相關問題