suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >jquery löscht vier Datenzeilen in der Tabelle

jquery löscht vier Datenzeilen in der Tabelle

WBOY
WBOYOriginal
2023-05-23 16:02:08586Durchsuche

In Webanwendungen sind Tabellen ein sehr häufiges und wichtiges Oberflächenelement. Zeilen und Spalten in Tabellen werden zur Anzeige von Daten oder zur Bereitstellung von Menüoptionen verwendet. Manchmal müssen wir jedoch einige Datenzeilen in der Tabelle löschen, beispielsweise wenn der Benutzer einen Löschvorgang ausführt. In diesem Artikel wird erläutert, wie Sie mit jQuery vier Datenzeilen in einer Tabelle löschen.

Schritt 1: Erstellen Sie eine HTML-Tabelle

Als Erstes müssen Sie eine HTML-Tabelle erstellen, damit Sie mit jQuery die vier Datenzeilen in der Tabelle löschen können. Der HTML-Code lautet wie folgt: 

<table id="myTable">
  <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>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>23</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Diese Tabelle enthält eine Kopfzeile und 6 Datenzeilen, von denen jede drei Datenspalten enthält: Name, Alter und Geschlecht. Unser Ziel ist es, die ersten vier Datenzeilen in der Tabelle zu löschen.

Schritt 2: Verwenden Sie jQuery, um die Datenzeilen auszuwählen, die gelöscht werden müssen.

Um die ersten vier Datenzeilen in der Tabelle zu löschen, müssen wir den jQuery-Selektor verwenden, um diese vier Datenzeilen auszuwählen. Der Code lautet wie folgt: 

var rowsToDelete = $('#myTable tbody tr:lt(4)');

Diese Codezeile verwendet eine Kettenaufrufmethode. Verwenden Sie zunächst $('#myTable'), um die Tabelle auszuwählen, und verwenden Sie dann :lt(. 4) Die ersten vier Datenzeilen werden ausgewählt und schließlich werden alle Datenzeilen über tbody tr ausgewählt. Auf diese Weise enthält die Variable rowsToDelete alle Zeilendaten, die gelöscht werden müssen. $('#myTable')选中了表格，然后通过:lt(4)选中了前四行数据，最后通过tbody tr选中了所有的行数据。这样rowsToDelete变量就是所有需要删除的行数据。

步骤三：使用jQuery删除选中的行数据

有了选中的表格行数据，我们就可以使用jQuery删除这些行了。代码如下：

rowsToDelete.remove();

这一行简单的代码使用了jQuery的remove()

Schritt 3: Verwenden Sie jQuery, um die ausgewählten Zeilendaten zu löschen

Mit den ausgewählten Tabellenzeilendaten können wir jQuery verwenden, um diese Zeilen zu löschen. Der Code lautet wie folgt: 

console.log($('#myTable tbody tr'));

Diese einfache Codezeile verwendet die Methode remove() von jQuery, um die ausgewählten Tabellenzeilendaten zu löschen.

Schritt 4: Löschergebnis überprüfen

Um zu überprüfen, ob die ersten vier Datenzeilen erfolgreich gelöscht wurden, können wir den folgenden Code verwenden, um die Tabellendaten an die Konsole auszugeben: 

<html>
  <head>
    <title>jQuery删除表格四行数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        var rowsToDelete = $('#myTable tbody tr:lt(4)');
        rowsToDelete.remove();
        console.log($('#myTable tbody tr'));
      });
    </script>
  </head>
  <body>
    <table id="myTable">
      <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>28</td>
          <td>女</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>35</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>26</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Wenn die ersten vier Zeilen Wenn alle Daten erfolgreich gelöscht wurden, werden in der Konsole nur die letzten beiden Datenzeilen angezeigt. 🎜🎜Der vollständige Code lautet wie folgt: 🎜rrreee🎜Die in diesem Artikel bereitgestellten Codeausschnitte können als Grundlage für das Erlernen von jQuery zum Löschen von Tabellenzeilendatenoperationen verwendet werden. Leser können den Code entsprechend den tatsächlichen Anforderungen ändern, um ihn an ihre eigene Anwendung anzupassen Szenarien. 🎜

Das obige ist der detaillierte Inhalt vonjquery löscht vier Datenzeilen in der Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery html 选择器 tbody tr
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwendung der JQuery-DefinitionsvariablenNächster Artikel：Verwendung der JQuery-Definitionsvariablen

In Verbindung stehende Artikel

Mehr sehen