Heim > Web-Frontend > Front-End-Fragen und Antworten > So durchlaufen Sie die Tabelle, um jedes Tr in JQuery abzurufen

So durchlaufen Sie die Tabelle, um jedes Tr in JQuery abzurufen

王林
Freigeben: 2023-05-18 17:59:37
Original
1068 Leute haben es durchsucht

Während des Entwicklungsprozesses von jQuery ist die Tabellenverarbeitung eine sehr häufige Anforderung, und das Durchlaufen der Tabelle und das Herausnehmen jedes tr-Elements gehört ebenfalls zu den Grundoperationen. Im Folgenden werden wir anhand von Beispielcode im Detail vorstellen, wie man mit jQuery die Tabelle durchläuft und jedes tr-Element entfernt.

Zuerst müssen wir eine HTML-Tabelle vorbereiten, die mehrere -Elemente enthält. Ein Beispiel lautet wie folgt:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
Nach dem Login kopieren

Als nächstes können wir den folgenden Code verwenden, um jedes tr-Element dieser Tabelle zu durchlaufen und verwandte Operationen auszuführen.

$("#myTable tbody tr").each(function() {
  //这里可以对每个tr元素进行操作
  console.log($(this).html());
});
Nach dem Login kopieren

Im obigen Code verwenden wir den jQuery-Selektor $("#myTable tbody tr"), um alle tr-Elemente im tbody-Tag in der Tabelle auszuwählen. Als nächstes verwenden Sie die Methode .each(), um jedes tr-Element zu durchlaufen und zu bearbeiten. Hier haben wir den Inhalt jedes tr-Elements auf die Konsole gedruckt, den Sie durch den benötigten Code ersetzen können. $("#myTable tbody tr")来选择表格中tbody标签中的所有tr元素。接着,使用.each()方法进行遍历,并对每个tr元素进行操作。在这里,我们将每个tr元素的内容打印到了控制台中,你可以将其替换为你所需的代码。

需要注意的是,我们选择器中使用了#myTable来获取整个表格,tbody用于获取表格的内容部分,避免了将表格的表头也遍历进来。

另外,在进行表格元素的操作过程中,你还可以获取每个tr元素中的子元素td,并对其进行操作。以下示例展示如何获取每个tr中的所有td元素。

$("#myTable tbody tr").each(function() {
  //获取当前行的td元素
  $(this).children('td').each(function() {
    //这里可以对每个td元素进行操作
    console.log($(this).html());
  });
});
Nach dem Login kopieren

上述代码通过$(this).children('td')获取到当前行的所有td元素,然后使用.each()方法进行遍历并进行相关的操作。

总结:通过上述示例代码,我们可以看到使用jQuery遍历表格并取出每个tr元素非常简单,只需要使用选择器获取表格中的tr元素或使用子元素选择器获取tr中的td元素,然后使用.each()

Es ist zu beachten, dass wir #myTable im Selektor verwenden, um die gesamte Tabelle abzurufen, und tbody wird verwendet, um den Inhaltsteil der Tabelle abzurufen, wobei der Header vermieden wird des Tisches. 🎜🎜Darüber hinaus können Sie während der Operation von Tabellenelementen auch das Unterelement td in jedem tr-Element abrufen und damit arbeiten. Das folgende Beispiel zeigt, wie alle td-Elemente in jedem tr abgerufen werden. 🎜rrreee🎜Der obige Code ruft alle td-Elemente der aktuellen Zeile über $(this).children('td') ab und verwendet dann die Methode .each() zum Durchqueren und Durchführen relevanter Vorgänge. 🎜🎜Zusammenfassung: Anhand des obigen Beispielcodes können wir erkennen, dass es sehr einfach ist, mit jQuery die Tabelle zu durchlaufen und jedes tr-Element herauszunehmen. Sie müssen nur den Selektor verwenden, um das tr-Element in der Tabelle abzurufen, oder das verwenden Untergeordneter Elementselektor, um das td-Element in tr abzurufen. Verwenden Sie dann die Methode .each() zum Durchlaufen. Natürlich können Sie entsprechend den tatsächlichen Anforderungen verwandte Vorgänge für jedes tr- oder td-Element ausführen, um eine benutzerdefinierte Anzeige der Tabelle zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie die Tabelle, um jedes Tr in JQuery abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage