So wählen Sie die aktuelle Zeile in jquery aus-Front-End-Fragen und Antworten-php.cn

So wählen Sie die aktuelle Zeile in jquery aus

PHPz

Freigeben： 2023-05-11 22:31:36

Original

696 Leute haben es durchsucht

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die Entwicklern dabei helfen kann, auf einfache Weise hochgradig interaktive und reaktionsfähige Webseiten zu schreiben. In jQuery ist das Auswählen von Elementen ein sehr häufiger Vorgang, und das Auswählen der aktuellen Zeile (auch Hervorhebung der aktuellen Zeile genannt) ist eine wichtige Anforderung im Entwicklungsprozess. In diesem Artikel erfahren Sie, wie Sie die aktuelle Zeile mit jQuery auswählen und formatieren.

1. Anforderungsanalyse

In der Webentwicklung verwenden wir normalerweise Tabellen zur Darstellung von Daten. Wenn wir die Maus auf eine Zeile (tr) der Tabelle bewegen, hoffen wir, dass die Zeile hervorgehoben wird, um den Benutzer an die aktuell ausgewählte Zeile zu erinnern. Daher müssen wir einen Teil des jQuery-Codes schreiben, um diese Anforderung zu erfüllen.

2. Code-Implementierung

Bei der Umsetzung dieser Anforderung können wir die on()-Methode und die siblings()-Methode von jQuery verwenden, um die aktuelle Zeile auszuwählen und ihr Stile hinzuzufügen. Die spezifischen Implementierungsschritte lauten wie folgt:

Binden Sie ein Mausschiebeereignis an jede Zeile (tr) der Tabelle. Das Ereignis wird ausgelöst, wenn sich die Maus zu einer bestimmten Zeile bewegt.
```
$('table tr').on('mouseover', function() {
 // 鼠标滑过事件处理逻辑
});
```
Nach dem Login kopieren
Verwenden Sie in der Ereignisverarbeitungslogik die Methode siblings(), um die Geschwisterelemente der aktuellen Zeile auszuwählen und ihnen dann Stile hinzuzufügen.
```
$('table tr').on('mouseover', function() {
 $(this).siblings().removeClass('currentRow'); // 移除其他行的样式
 $(this).addClass('currentRow'); // 为当前行添加样式
});
```
Nach dem Login kopieren
Definieren Sie die .currentRow-Klasse in CSS, um den Stil der aktuellen Zeile festzulegen.
```
.currentRow {
 background-color: #f0f0f0;
}
```
Nach dem Login kopieren

Das Implementierungsprinzip dieses Codes besteht darin, dass, wenn die Maus über eine bestimmte Zeile gleitet, zuerst die Methode siblings() verwendet wird, um die Geschwisterelemente der aktuellen Zeile, also anderer Zeilen, auszuwählen, und dann die Methode „removeClass“ verwendet wird ()-Methode, um vorhandene Elemente in anderen Zeilenstilen zu entfernen, und verwenden Sie schließlich die addClass()-Methode, um der aktuellen Zeile einen Hervorhebungsstil hinzuzufügen.

3. Beispieldemonstration

Das Folgende ist ein einfaches Beispiel, um zu demonstrieren, wie man mit jQuery die aktuelle Zeile auswählt und ihr Stile hinzufügt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery选择当前行</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
        .currentRow {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
                <td>广州市天河区</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('table tr').on('mouseover', function() {
            $(this).siblings().removeClass('currentRow');
            $(this).addClass('currentRow');
        });
    </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel binden wir das Maus-Rollover-Ereignis an jede Zeile der Tabelle. Wenn sich die Maus zu einer bestimmten Zeile bewegt, verwenden wir die Methode siblings(), um andere Elemente der aktuellen Zeile (d. h. andere Zeilen) auszuwählen Verschieben Sie sie. Fügen Sie schließlich zusätzlich zu den vorhandenen Stilen einen Hervorhebungsstil zur aktuellen Zeile hinzu.

4. Zusammenfassung

Das Auswählen der aktuellen Zeile ist ein sehr häufiger Vorgang in der Webentwicklung und kann einfach mit jQuery implementiert werden. Mithilfe der Methoden on() und siblings() können wir die aktuelle Zeile auswählen und ihr Stile hinzufügen. Gleichzeitig sollten Sie beim Hinzufügen von Stilen zur aktuellen Zeile darauf achten, die entsprechende Stilklasse in CSS zu definieren, um eine einfache Änderung des Stils sicherzustellen.

Das obige ist der detaillierte Inhalt vonSo wählen Sie die aktuelle Zeile in jquery aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!