So bearbeiten Sie Javascript in einer Tabelle

Tabelle ist eines der am häufigsten verwendeten Elemente in der WEB-Entwicklung und wird zum Anzeigen von Daten oder Layoutseiten usw. verwendet. Tabellenbezogene JavaScript-Operationen gehören ebenfalls zu den notwendigen Fähigkeiten für Entwickler. In diesem Artikel wird ausführlich beschrieben, wie Sie die JavaScript-Operation der Tabelle bearbeiten.

1. Grundkenntnisse über Tabellen

In HTML werden Tabellen mithilfe von Tags wie table, tr, th, td usw. implementiert, wobei table die gesamte Tabelle darstellt, tr die Zeilen in der Tabelle darstellt und th den Header darstellt Zelle in der Tabelle und td Stellt Datenzellen in einer Tabelle dar. Das Folgende ist eine einfache Tabelle:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

Auf diese Weise kann eine Tabelle mit drei Datenspalten auf der Seite angezeigt werden. Als Nächstes verwenden wir diese Tabelle als Beispiel, um zu zeigen, wie die Tabelle mit JavaScript bearbeitet wird.

2. Holen Sie sich das Tabellenobjekt

In JavaScript können wir das Tabellenobjekt über die getElementById-Methode oder die getElementsByTagName-Methode des Dokumentobjekts abrufen, zum Beispiel:

var table = document.getElementById("tableId"); //通过id获取表格对象
var td = document.getElementsByTagName("td"); //通过标签名获取所有表格单元格对象

Um die getElementById-Methode zum Abrufen des Tabellenobjekts zu verwenden, benötigen Sie um das id-Attribut zur entsprechenden Tabelle in HTML hinzuzufügen, zum Beispiel:

<table id="tableId">
  <!-- 表格内容 -->
</table>

3. Die Zeilen und Zellen in der Tabelle abrufen. Das Abrufen der Zeilen und Zellen in der Tabelle ist eine der grundlegendsten Operationen zum Betreiben der Tabelle. Wir können alle Zeilen der Tabelle über das Zeilenattribut des Tabellenobjekts und alle Zellen in der Zeile über das Zellenattribut des Zeilenobjekts abrufen. Zum Beispiel:

//获取表头行对象
var thead = table.rows[0];
//获取第一行对象
var tr = table.rows[1];
//获取第一行第一列单元格对象
var td = table.rows[1].cells[0];
//获取第二行第三列单元格对象
var td2 = table.rows[2].cells[2];

4. Zeilen und Zellen hinzufügen

Es ist oft notwendig, Zeilen und Zellen dynamisch in Tabellen hinzuzufügen. Wir können Zeilen über die Methode insertRow hinzufügen, die ein Zeilenobjekt zurückgibt, und wir können Zellen über die Methode insertCell des Objekts hinzufügen. Zum Beispiel:

//在表格第二个位置插入一行
var newRow = table.insertRow(1);
//在该行第一个位置插入一个单元格
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Jerry';
//在该行第二个位置插入一个单元格
newCell = newRow.insertCell(1);
newCell.innerHTML = 18;
//在该行第三个位置插入一个单元格
newCell = newRow.insertCell(2);
newCell.innerHTML = '男';

Dadurch wird eine Zeile an der zweiten Position der Tabelle eingefügt und drei Zellen in die Zeile eingefügt.

5. Zeilen und Zellen löschen

Das Löschen von Zeilen und Zellen in Tabellen ist ebenfalls ein häufiger Vorgang. Wir können Zeilen über die Remove-Methode des Zeilenobjekts oder Zellen über die Remove-Methode des Zellobjekts löschen. Zum Beispiel:

//获取第三行对象
var row = table.rows[2];
//删除该行
table.deleteRow(row.rowIndex);
//获取第一行第二个单元格对象
var cell = table.rows[0].cells[1];
//删除该单元格
cell.parentNode.removeChild(cell);

6. Zellen zusammenführen

Manchmal müssen wir benachbarte Zellen in der Tabelle zusammenführen, um das Seitenlayout zu erstellen oder Daten anzuzeigen usw. Wir können die Eigenschaften rowSpan und colSpan verwenden, um Zellen zusammenzuführen. Zum Beispiel:

//合并第一行第一列和第二列单元格
var td1 = table.rows[0].cells[0];
td1.rowSpan = 2;
//删除第二行第一列单元格
table.rows[1].deleteCell(0);

Dadurch werden die Zellen in der ersten Zeile, der ersten Spalte und der zweiten Spalte zusammengeführt und die Zellen in der zweiten Zeile, der ersten Spalte gelöscht.

7. Zellinhalte ändern

Neben dem Hinzufügen, Löschen und Zusammenführen von Zellen gehört auch das Ändern von Zellinhalten zu den häufigsten Vorgängen. Wir können den Textinhalt innerhalb der Zelle über die Eigenschaft innerHTML oder innerText des Zellobjekts ändern. Zum Beispiel:

//获取第二行第三列单元格对象
var td = table.rows[2].cells[2];
//修改单元格内部文本内容
td.innerHTML = '女';

Zu diesem Zeitpunkt ändert sich der Zellentextinhalt in der zweiten Zeile und der dritten Spalte in „weiblich“.

8. Zusammenfassung

Das Obige stellt die allgemeinen Vorgänge der JavaScript-Bearbeitung von Tabellen vor, einschließlich des Abrufens von Tabellenobjekten, des Abrufens von Zeilen und Zellen, des Hinzufügens und Löschens von Zeilen und Zellen, des Zusammenführens von Zellen, des Änderns von Zellinhalten usw. Die Beherrschung dieser Vorgänge kann unsere Tabellenbearbeitung komfortabler und flexibler machen und auch unsere WEB-Entwicklungsfähigkeiten verbessern.

Das obige ist der detaillierte Inhalt vonSo bearbeiten Sie Javascript in einer Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!