在做表格時，因為有很多行，我們會希望能夠用顏色來輔助使用者閱讀，例如換行變色就是大家常用的方式，用手動的方式逐行去改CSS碼太辛苦了，只要一行jQuery程式碼就可以達成...
假設我們要讓偶數行底色變黃色
CSS碼
.odd{
background-color:yellow;
}
html碼
<table>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>
jQuery碼
$(function(){
$('tr:odd').addClass('odd');
});
執行後就可以看到偶數行變成黃底了，是不是很方便阿。
完整程式碼：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.odd{
background-color:yellow;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tr:odd').addClass('odd');
});
</script>
</head>
<body>
<table>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>
</body>
</html>
補充：如果要把偶數行換成奇數行，就把odd改成even。
No comments:
Post a Comment