使用JQ完成表格隔行換色的簡單實例

更新時間：2017年08月25日 08:26:15 投稿：jingxian

下面小編就為大家?guī)硪黄褂肑Q完成表格隔行換色的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、步驟分析：

第一步：引入jquery的類庫

第二步：直接寫頁面加載函數(shù)

第三步：直接使用jquery的選擇器(組合選擇)拿到需要操作的元素(奇數(shù)行和偶數(shù)行)

第四步：分別使用CSS的方法(css(name,value))對奇數(shù)行和偶數(shù)行設置背景顏色。

2、具體代碼實現(xiàn)：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行換色</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.頁面加載
   $(function(){
    //2.獲取tbody下面的偶數(shù)行并設置背景顏色
    $("tbody tr:even").css("background-color","gold");
    //3.獲取tbody下面的奇數(shù)行并設置背景顏色
    $("tbody tr:odd").css("background-color","pink");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>編號</th>
     <th>姓名</th>
     <th>年齡</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>張三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>趙六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

3、真正開發(fā)時一般CSS樣式已經(jīng)由美工寫好，此時可以使用jquery的CSS類操作

具體代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行換色</title>
  <link rel="stylesheet" href="../css/style.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.頁面加載
   $(function(){
    //2.獲取tbody下面的偶數(shù)行并設置背景顏色
    $("tbody tr:even").addClass("even");
    //3.獲取tbody下面的奇數(shù)行并設置背景顏色
    $("tbody tr:odd").addClass("odd");
   });
  </script>
 </head>
 <body>
  <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
   <thead>
    <tr>
     <th>編號</th>
     <th>姓名</th>
     <th>年齡</th>
    </tr>
   </thead>
   <tbody>
    <tr >
     <td>1</td>
     <td>張三</td>
     <td>22</td>
    </tr>
    <tr >
     <td>2</td>
     <td>李四</td>
     <td>25</td>
    </tr>
    <tr >
     <td>3</td>
     <td>王五</td>
     <td>27</td>
    </tr>
    <tr >
     <td>4</td>
     <td>趙六</td>
     <td>29</td>
    </tr>
    <tr >
     <td>5</td>
     <td>田七</td>
     <td>30</td>
    </tr>
    <tr >
     <td>6</td>
     <td>汾九</td>
     <td>20</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

在谷歌瀏覽器內(nèi)運行，就實現(xiàn)了表格隔行換色的效果。

以上這篇使用JQ完成表格隔行換色的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: