JQuery来控制表格奇偶行的不同背景颜色显示

时间:2022-10-30 14:48:17

概述: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.奇偶行均加入条件

JQuery来控制表格奇偶行的不同背景颜色显示

 2.仅对偶数行行加入条件

JQuery来控制表格奇偶行的不同背景颜色显示

 3.奇偶行均加不入条件

JQuery来控制表格奇偶行的不同背景颜色显示

 4.去掉特定筛选条件

JQuery来控制表格奇偶行的不同背景颜色显示

 
你想要的又是哪种效果呢?快去酌情改改吧