<!--鼠標滑過表格行變色效果開始-->
<script type="text/javascript">
? ? ? ? /* 當鼠標移到表格上是，當前一行背景變色 */
? ? ? $(document).ready(function(){
? ? ? ? ? ? $(".g-sun-li tr td").mouseover(function(){
? ? ? ? ? ? ? ? $(this).parent().find("td").css("background-color","#fff2cc");
? ? ? ? ? ? });
? ? ? })
? ? ? /* 當鼠標在表格上移動時，離開的那一行背景恢復(fù) */
? ? ? $(document).ready(function(){?
? ? ? ? ? ? $(".g-sun-li tr td").mouseout(function(){
? ? ? ? ? ? ? ? var bgc = $(this).parent().attr("bg");
? ? ? ? ? ? ? ? $(this).parent().find("td").css("background-color",bgc);
? ? ? ? ? ? });
? ? ? })
? ? ??
? ? ? $(document).ready(function(){?
? ? ? ? ? ? var color="#f7f7f7"
? ? ? ? ? ? $(".g-sun-li tr:odd td").css("background-color",color); ?//改變偶數(shù)行背景色
? ? ? ? ? ? /* 把背景色保存到屬性中 */
? ? ? ? ? ? $(".g-sun-li tr:odd").attr("bg",color);
? ? ? ? ? ? $(".g-sun-li tr:even").attr("bg","#fff");
? ? ? })
? ? ? </script>

總結(jié)

以上是生活随笔為你收集整理的鼠标划过表格行变色效果JS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。