ホームページ > 記事 > ウェブフロントエンド > jQueryを使用してカラフルなストライプのテーブル効果を作成するにはどうすればよいですか?
jQueryを使用してカラフルなストライプのテーブル効果を作成するにはどうすればよいですか?
- 藏色散人オリジナル
- 2021-08-20 11:13:321733ブラウズ
前回の記事『ラベルを使わずにテーブルを作成する方法に挑戦してみませんか？ >>タグを使用せずにテーブルを作成する方法を紹介します。必要な友達は詳細を学ぶことができます~
この記事の主な内容は、jQuery を使用してカラフルなストライプのテーブル効果を作成する方法を説明することです。
同じテーブル スタイルに飽きているかもしれません。今日は、カラフルなストライプのテーブル効果を作成する方法を紹介します。必要な場合は、この記事をお見逃しなく~
コードの直下で確認できます:
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现彩色条纹表格</title>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)")
.addClass("zebrastripe");
});
</script>
<style type="text/css">
body,
td {
font-size: 10pt;
text-align: center;
}
h1 {
color: green;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
font-size: 15px;
padding: 5px 8px;
border: 1px outset silver;
background-color: rgb(197, 69, 69);
color: white;
}
tr {
border: 1px outset silver;
padding: 5px 8px;
background-color: white;
margin: 1px;
}
tr.zebrastripe {
background-color: green;
}
td {
border: 0.5px outset silver;
border-collapse: collapse;
padding: 5px 8px;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>
PHP中文网
</h1>
<table class="center">
<tr>
<th>ID</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>112</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>109</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>123</td>
</tr>
<tr>
<td>5</td>
<td>赵五</td>
<td>108</td>
</tr>
<tr>
<td>6</td>
<td>周六</td>
<td>122</td>
</tr>
</table>
</body>
</html>効果は次のとおりです:
上記のコードで、コードの一部を紹介します。
$(function() {
$("table tr:nth-child(odd)").addClass("zebrastripe");
});ここ この関数では、zebrastrip が使用されるクラス名であり、odd は奇数行に色付きのストライプが含まれることを意味します。
偶数行のストライプを変更したい場合は、単に使用します:
$(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})注:
nth-child(n) セレクターは、親要素の任意のタイプの n 番目の子要素であるすべての要素を選択します。
addClass() メソッドは、選択した要素に 1 つ以上のクラスを追加します。このメソッドは、既存のクラス属性を削除しません。1 つ以上のクラス属性を追加するだけです。
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。「jquery ビデオ チュートリアル 」と「javascript 基本チュートリアル 」を学習する皆さんを歓迎します。
以上がjQueryを使用してカラフルなストライプのテーブル効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。