<html>
<head>
<title>New Document</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').addClass('oddColor');
$('tr:even').addClass('evenColor');
$('td:contains("Christen")').addClass('highlight')
});
</script>
<style type="text/css">
<!--
.oddColor {
background-color:#ffc;
}
.evenColor {
background-color:#cef;
}
.highlight{
font-weight:bold;
color:#f00}
-->
</style>
</head>
<body>
<table>
<tr>
<td>我是奇数行</td>
<td>Christen</td>
<td>我是奇数行</td>
<td>我是奇数行</td>
</tr>
<tr>
<td>我是偶数行</td>
<td>Pinkey</td>
<td>我是偶数行</td>
<td>我是偶数行</td>
</tr>
<tr>
<td>我是奇数行</td>
<td>我是奇数行</td>
<td>Maomao</td>
<td>我是奇数行</td>
</tr>
<tr>
<td>我是偶数行</td>
<td>我是偶数行</td>
<td>我是偶数行</td>
<td>我是偶数行</td>
</tr>
</table>
</body>
</html>
jQuery實現表格隔行分色顯示
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言