概述：JQuery通过操作DOM来控制页面的显示。来看代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery使不同行变不同的颜色</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/style.css">-->
<style type="text/css">
.odd{background-color:#FFCCFF;}
.even{ background-color:#CCFFFF;}
.highlight{background-color:00FF00;}
</style>
<script type="text/javascript" src="../js/jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#tbody1 tr:odd').filter(':gt(0)').addClass('odd');
$('#tbody1 tr:even').filter(':gt(0)').addClass('even');
$('#tbody1 td:contains("Because of you")').addClass('highlight');
});
</script>
</head>
<body>
<table border="1">
<thead><tr><td colspan="2">我是标题</td></tr></thead>
<tbody id="tbody1">
<tr>
<td>很爱很爱你</td><td>刘若英</td>
</tr>
<tr>
<td>荷塘月色</td><td>周杰伦</td>
</tr>
<tr>
<td>约定</td><td>周惠</td>
</tr>
<tr>
<td>I have not been to the oxford</td><td>unknown</td>
</tr>
<tr>
<td>Because of you</td><td>unkonwn</td>
</tr>
<tr>
<td>Only玉</td><td>罗家英</td>
</tr>
<tr>
<td>一生有你</td><td>水木年华</td>
</tr>
<tr>
<td>流年</td><td>王菲</td>
</tr>
<tr>
<td>记事本</td><td>陈慧琳</td>
</tr>
</tbody>
</table>
</body>
</html>
从上文不难看出，代码中的精华在于：
<script type="text/javascript" src="../js/jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#tbody1 tr:odd').filter(':gt(0)').addClass('odd');
$('#tbody1 tr:even').filter(':gt(0)').addClass('even');
$('#tbody1 td:contains("Because of you")').addClass('highlight');
});
</script>
这其中，even代表偶数行，tbody中第一行代表0，以此类推，filter(':gt(0)')这样的东西代表分别在奇数行或者偶数行中的第一行，等下看几个效果图你就了然了。第三个td:contains("Because of you")是指在tbody中对匹配Because of you进行highlight的样式显示。来看效果：
1.奇偶行均加入条件
2.仅对偶数行行加入条件
3.奇偶行均加不入条件
4.去掉特定筛选条件
你想要的又是哪种效果呢？快去酌情改改吧
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
