jQuery:表格的奇偶行变色，jquery实例之表格隔一行
生活随笔
收集整理的這篇文章主要介紹了
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery:表格的奇偶行變色
<html>
<head>
<title>表格變色</title>
<style type="text/css">
.odd{background:#ffffee;}
.even{background:#fff38f;}
.first{background:red;}
.last{background:blue;}
.mouseOver{background:green;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd"); //加奇行樣式
$("tr:even").addClass("even"); //加偶行樣式
$("tr:first").addClass("first"); //為第一行加樣式
$("tr:last").addClass("last"); //為最后行加樣式
//為行元素加上鼠標移入和移出事件
$("tr").mouseover(function() {
$(this).addClass("mouseOver") //加上樣式
}).mouseout(function() {
$(this).removeClass("mouseOver")//去掉樣式
});
})
</script>
</head>
<body>
<table border="1">
<tr><td>姓名</td><td>年齡</td></tr>
<tr><td>王華</td><td>18</td></tr>
<tr><td>劉云</td><td>19</td></tr>
<tr><td>劉亮</td><td>15</td></tr>
<tr><td>葉子</td><td>17</td></tr>
<tr><td>劉夢</td><td>20</td></tr>
</table>
</body>
</html>
$(function(){
$(".tab tr:even").addClass("even");
$(".tab tr:odd").addClass("odd");
});
</script>
<html>
<head>
<title>表格變色</title>
<style type="text/css">
.odd{background:#ffffee;}
.even{background:#fff38f;}
.first{background:red;}
.last{background:blue;}
.mouseOver{background:green;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd"); //加奇行樣式
$("tr:even").addClass("even"); //加偶行樣式
$("tr:first").addClass("first"); //為第一行加樣式
$("tr:last").addClass("last"); //為最后行加樣式
//為行元素加上鼠標移入和移出事件
$("tr").mouseover(function() {
$(this).addClass("mouseOver") //加上樣式
}).mouseout(function() {
$(this).removeClass("mouseOver")//去掉樣式
});
})
</script>
</head>
<body>
<table border="1">
<tr><td>姓名</td><td>年齡</td></tr>
<tr><td>王華</td><td>18</td></tr>
<tr><td>劉云</td><td>19</td></tr>
<tr><td>劉亮</td><td>15</td></tr>
<tr><td>葉子</td><td>17</td></tr>
<tr><td>劉夢</td><td>20</td></tr>
</table>
</body>
</html>
也許，有的網友會問：我并不是要所有的表格，都這樣奇偶換行變色啊？？怎么辦？那么，看jquery代碼如下：
$(function(){
$(".tab tr:even").addClass("even");
$(".tab tr:odd").addClass("odd");
});
</script>
.tab為一個class,就是給你的需要定義行換色的表格加個class為tab的樣式，這個樣式什么都不用設置。此處只是為了jquery識別調用。
.tab tr 兩者間的空格，表示，表格樣式為tab的下面所有的tr。它是jquery的選擇器的一個用法， 跟css選擇符很像，不是嗎？
轉載于:https://www.cnblogs.com/c3055/archive/2011/09/14/2176472.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的jQuery:表格的奇偶行变色，jquery实例之表格隔一行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 归并 快排 快速幂
- 下一篇： 《算法导论》——MergeSort