Heim >Web-Frontend >js-Tutorial >Wie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?
Wie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?
- 藏色散人Original
- 2021-08-20 11:13:321773Durchsuche
Im vorherigen Artikel „Herausforderung, wie man eine Tabelle erstellt, ohne Etiketten zu verwenden? 》Stellt Ihnen vor, wie Sie eine Tabelle ohne die Verwendung von Tags erstellen. Freunde, die es benötigen, können mehr erfahren~
Der Hauptinhalt dieses Artikels besteht darin, Ihnen beizubringen, wie Sie mit jQuery einen farbenfrohen gestreiften Tabelleneffekt erstellen.
Vielleicht haben Sie die gleichen Tischstile satt. Heute zeige ich Ihnen, wie Sie einen Tischeffekt mit farbigen Streifen erstellen. Wenn Sie ihn brauchen, sollten Sie sich diesen Artikel nicht entgehen lassen:
<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>Der Effekt ist wie folgt:
Lassen Sie mich Ihnen einen Codeabschnitt im obigen Code vorstellen:
$(function() {
$("table tr:nth-child(odd)").addClass("zebrastripe");
});In der Funktion hier ist Zebrastreifen der verwendete Klassenname, und ungerade bedeutet, dass ungerade Zeilen verwendet werden haben farbige Streifen.
Wenn Sie gerade Zeilenstreifen ändern möchten, verwenden Sie einfach:
$(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})Hinweis: nth-child(n)-Selektor wählt das n-te Kind eines beliebigen Typs aus, der zu seinem übergeordneten Element All gehört Elemente des Elements.
addClass()-Methode fügt dem ausgewählten Element eine oder mehrere Klassen hinzu. Diese Methode entfernt nicht das vorhandene Klassenattribut, sondern fügt nur ein oder mehrere Klassenattribute hinzu. nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。
addClass()
JQuery-Video-Tutorial“ und „Javascript-Basis-Tutorial“ zu lernen!
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit jQuery einen bunt gestreiften Tabelleneffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!