Im Webdesign sind Tabellen eine gängige Layoutmethode. Wenn die Tabelle jedoch zu viele Zeilen enthält, kann es für Benutzer schwierig sein, zwischen verschiedenen Zeilen zu unterscheiden, was sich auf die Benutzererfahrung und Benutzerfreundlichkeit auswirkt. Um dieses Problem zu lösen, können Entwickler einige visuelle Effekte hinzufügen, um verschiedene Zeilen zu unterscheiden. In diesem Artikel verwenden wir jQuery, um die Zeilenfarbe in einer Tabelle zu ändern und so die Benutzererfahrung zu verbessern.
Der erste Schritt besteht darin, die Tabelle in HTML einzurichten. Wir veranschaulichen diesen Prozess anhand einer einfachen Tabelle mit drei Spalten:
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>女</td>
</tr>
<tr>
<td>赵六</td>
<td>28</td>
<td>女</td>
</tr>
</tbody>
</table>Als nächstes kommt der CSS-Teil. Wir legen den Stil der Tabelle und die Farbe der Zeilen fest:
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
}
tr {
border-bottom: 1px solid #ddd;
}
tr.even {
background-color: #f2f2f2;
}Hier legen wir den Grundstil für die Tabelle fest, einschließlich Zellabstand und Ränder. Wir legen auch den Zeilenstil fest, der die Farbe in jeder zweiten Zeile auf Grau ändert.
Jetzt verwenden wir jQuery, um Stile zu jeder Zeile der Tabelle hinzuzufügen. Wir verwenden eine Variable, um die Parität der aktuellen Zeile zu verfolgen, und fügen dann den Klassennamen „even“ für die geraden Zeilen hinzu.
$(document).ready(function() {
$('table tbody tr:even').addClass('even');
});Diese Funktion erkennt zunächst, ob das Dokument geladen wurde und betriebsbereit ist. Anschließend wählt es mithilfe eines jQuery-Selektors das tr-Untertag jedes tbody-Tags in der Tabelle aus, filtert die geraden Zeilen heraus und fügt den Klassennamen „even“ zu jeder geraden Zeile hinzu. Danach ändern die geraden Zeilen der Tabelle die Hintergrundfarbe, um sie besser lesbar zu machen.
Anhand dieses Beispiels können wir sehen, wie man mit jQuery und CSS den Stil der Tabelle ändert. Dies erhöht nicht nur die visuelle Wirkung des Webdesigns, sondern verbessert auch das Benutzererlebnis und erleichtert die Nutzung der Website.
Das obige ist der detaillierte Inhalt vonjquery ändert tr dunkle Farbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
