ホームページ > 記事 > ウェブフロントエンド > jQuery を使用してテーブルの色を交互の行で変更するサンプルコード
jQuery を使用してテーブルの色を交互の行で変更するサンプルコード
- 小云云オリジナル
- 2017-12-29 13:46:411597ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。