jQuery を使用してテーブルの色を交互の行で変更するサンプルコード-jsチュートリアル-php.cn

jQuery を使用してテーブルの色を交互の行で変更するサンプルコード

小云云

リリース： 2017-12-29 13:46:41

オリジナル

1671 人が閲覧しました

この記事では、JQ を使用してテーブル内の交互の行の色を変更する簡単な例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. ステップ分析:

最初のステップ: jquery クラスライブラリを導入する

2 番目のステップ: ページ読み込み関数を直接記述する

3 番目のステップ: jquery セレクター (組み合わせ選択) を直接使用して必要な操作を取得する要素 (奇数行と偶数行)

ステップ 4: CSS メソッド (css(name, value)) を使用して、奇数行と偶数行の背景色をそれぞれ設定します。

2. 具体的なコードの実装:

<!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下面的偶数行并设置背景颜色
    $("tbody tr:even").css("background-color","gold");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("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. 実際の開発では、一般的な CSS スタイルはアーティストによって記述されています

具体的なコードは次のとおりです。

Google Chrome で実行すると、テーブルの行ごとに色を変更する効果が得られます。