Löschen Sie angegebene Zellen in der Tabelle mit jQuery

Titel: Verwenden Sie jQuery, um bestimmte Zellelemente in der Tabelle zu löschen

In der Webentwicklung stoßen wir häufig auf Situationen, in denen wir Tabellen bedienen müssen, und eine davon besteht darin, bestimmte Zellelemente in der Tabelle zu löschen. Diese Funktion kann einfach mit jQuery erreicht werden. Im Folgenden wird anhand spezifischer Codebeispiele gezeigt, wie Sie mit jQuery bestimmte Zellelemente in einer Tabelle löschen.

Zuerst benötigen wir eine einfache HTML-Tabellenstruktur als Beispiel:

<table id="myTable">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteBtn">删除</button></td>
    </tr>
</table>

Im obigen Beispiel haben wir eine Tabelle mit Namen, Alter und Aktionsschaltflächen, und die letzte Zelle jeder Zeile enthält eine Schaltfläche „Löschen“. Unser Ziel ist es, die Daten der Zeile zu löschen, nachdem wir auf die Schaltfläche „Löschen“ geklickt haben.

Als nächstes verwenden wir jQuery, um die Löschfunktion zu implementieren. Führen Sie zunächst die jQuery-Bibliothek in die Seite ein:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Dann schreiben Sie jQuery-Code, um die Löschfunktion zu implementieren:

<script>
$(document).ready(function(){
    $('.deleteBtn').click(function(){
        $(this).closest('tr').remove();
    });
});
</script>

Im obigen Code verwenden wir zuerst das $(document).ready()来确保页面加载完成后再执行代码。然后，我们通过$('.deleteBtn').click()来监听所有“删除”按钮的点击事件。当点击按钮时，通过$(this).closest('tr').remove()找到最接近的<tr>-Element (d. h. die aktuelle Zeile) und löschen dann die Zeile. <p>Wenn nun auf die Schaltfläche „Löschen“ einer Zeile geklickt wird, werden die Daten dieser Zeile aus der Tabelle entfernt. </p> <p>Mit dem detaillierten Codebeispiel oben zeigen wir, wie man mit jQuery bestimmte Zellelemente in einer Tabelle löscht. Diese Methode ist einfach und effizient und kann uns dabei helfen, Tabellenoperationen in der Webentwicklung bequemer durchzuführen. </p> </tr>

Das obige ist der detaillierte Inhalt vonLöschen Sie angegebene Zellen in der Tabelle mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!