この記事では、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 で実行すると、テーブルの行ごとに色を変更する効果が得られます。 関連する推奨事項:JavaScriptの%を使用して交互の行の色を変更する方法
以上がjQuery を使用してテーブルの色を交互の行で変更するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。