jquery fügt der Tabelle Zeilen hinzu

jQuery ist eine effiziente und übersichtliche JavaScript-Bibliothek, die die JavaScript-Programmierung erheblich vereinfachen kann. Für Webentwickler müssen wir häufig die HTML-Tabelle (Tabelle) erweitern, indem wir neue Zeilen hinzufügen. Wie fügt man der Tabelle also über jQuery Zeilen hinzu? Als Nächstes erfahren Sie, wie Sie mit jQuery Zeilen zur Tabelle hinzufügen.

1. Definieren Sie die Tabelle in HTML

Definieren Sie zunächst die Tabelle, die wir auf der HTML-Seite benötigen. Wie unten gezeigt:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2. Neue Zeile hinzufügen

Als nächstes fügen Sie eine neue Zeile in jQuery hinzu. Wir können neue Zeilen hinzufügen, indem wir ein tr-Element erstellen, das ein td-Element enthält. Wie unten gezeigt:

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

Hier verwenden wir den jQuery-Selektor, um den Tbody der Tabelle auszuwählen, und rufen dann die Append-Funktion auf, um eine neue Zeile im Tbody anzuhängen. Die hinzugefügte Zeile ist ein tr-Element mit drei Zellen, von denen jede einen Wert enthält. Sie können sehen, dass wir mit jQuery eine Zeile zur Tabelle hinzugefügt haben.

3. Mehrere Zeilen durch eine Schleife hinzufügen

Manchmal müssen wir der Tabelle mehrere Zeilen durch eine Schleife hinzufügen. Wir können eine JavaScript-Schleife verwenden, um mehrere Zeilen hinzuzufügen. Wie unten gezeigt:

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

Hier verwenden wir eine for-Schleife, um zehnmal eine Schleife durchzuführen und jedes Mal über die Append-Funktion eine Zeile an den Tbody anzuhängen. Wir können die Zeichenfolgenverkettung verwenden, um den Wert jeder Zelle zu definieren, und die Variable i verwenden, um den Wert jeder Zelle eindeutig zu machen.

4. Zeile an angegebener Position einfügen

Manchmal müssen wir eine neue Zeile an einer bestimmten Position der Tabelle hinzufügen. Zu diesem Zeitpunkt müssen wir die spezifische Position angeben, an der die neue Zeile eingefügt werden soll. Wie unten gezeigt:

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

Hier definieren wir eine neue Zeile newRow und wählen über den Selektor die zweite Zeile targetRow in der Tabelle aus.

Dann verwenden wir die Funktion before, um die neue Zeile vor der Zielzeile hinzuzufügen.

Es ist zu beachten, dass die neue Zeile nicht eingefügt wird, wenn targetRow nicht vorhanden ist. Wenn Sie Zeilen nach der zweiten Zeile hinzufügen möchten, können Sie die After-Funktion anstelle der Before-Funktion verwenden.

Zusammenfassung

Die oben genannten sind die drei Möglichkeiten, wie wir jQuery verwenden, um der Tabelle Zeilen hinzuzufügen. Wir können neue Zeilen über die Append-Funktion hinzufügen, mehrere Zeilen über eine Schleife hinzufügen oder neue Zeilen an einer bestimmten Position einfügen. Durch den Einsatz von jQuery können wir HTML-Tabellen schnell und einfach erweitern und die Website leistungsfähiger und vollständiger machen.

Das obige ist der detaillierte Inhalt vonjquery fügt der Tabelle Zeilen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!