So richten Sie eine Tabelle in Javascript ein

JavaScript ist eine weit verbreitete Skriptsprache, mit der sich interaktive Webanwendungen erstellen lassen und die sich auch zum Aufbau von HTML-Tabellen eignet. In diesem Artikel wird erläutert, wie Sie mit JavaScript HTML-Tabellen einrichten, einschließlich Tabellenerstellung, Hinzufügen von Zeilen und Zellen sowie Stileinstellungen.

1. HTML-Tabellen erstellen

Es gibt zwei Möglichkeiten, Tabellen in JavaScript zu erstellen. Die erste besteht darin, das innerHTML-Attribut zu verwenden. Der Code lautet wie folgt:

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML = "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr><tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>"; // 设置表格内容
document.body.appendChild(table); // 将表格添加到页面中

Die andere Methode besteht darin, DOM zum Erstellen einer Tabelle zu verwenden. Der Code lautet wie folgt:

var table = document.createElement("table"); // 创建一个table元素
var row1 = document.createElement("tr"); // 创建第一行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "第一行，第一列"; // 设置单元格内容
cell2.innerHTML = "第一行，第二列";
row1.appendChild(cell1); // 将单元格添加到行中
row1.appendChild(cell2);
var row2 = document.createElement("tr"); // 创建第二行
var cell3 = document.createElement("td"); // 创建第一列单元格
var cell4 = document.createElement("td"); // 创建第二列单元格
cell3.innerHTML = "第二行，第一列";
cell4.innerHTML = "第二行，第二列";
row2.appendChild(cell3); // 将单元格添加到行中
row2.appendChild(cell4);
table.appendChild(row1); // 将行添加到表格中
table.appendChild(row2);
document.body.appendChild(table); // 将表格添加到页面中

Zweitens: Zeilen und Zellen hinzufügen

Es gibt zwei Möglichkeiten zum Hinzufügen von Tabellenzeilen und Zellen in der JavaScript-Methode. Eine besteht darin, das innerHTML-Attribut zu verwenden. Der Code lautet wie folgt:

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML += "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr>"; // 添加一行
table.innerHTML += "<tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>";
document.body.appendChild(table); // 将表格添加到页面中

Die andere Methode besteht darin, DOM zum Hinzufügen von Zeilen und Zellen zu verwenden. Der Code lautet wie folgt:

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
table.appendChild(row); // 将行添加到表格中
document.body.appendChild(table); // 将表格添加到页面中

3. Stileinstellung

Festlegen des Tabellenstils mit JavaScript ist auch sehr einfach. Mit dem style-Attribut können Sie den Stil von Zeilen und Zellen festlegen. Der Code lautet wie folgt:

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
cell1.style.border = "1px solid black"; // 设置单元格边框
cell2.style.border = "1px solid black";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
row.style.backgroundColor = "cyan"; // 设置行背景色
table.appendChild(row); // 将行添加到表格中
table.style.borderCollapse = "collapse"; // 设置表格边框合并
document.body.appendChild(table); // 将表格添加到页面中

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie mit JavaScript HTML-Tabellen festlegen, einschließlich Tabellenerstellung, Hinzufügen von Zeilen und Zellen usw Stileinstellungen. Durch das Festlegen der Tabelle über JavaScript kann der Tabellenstil flexibler und schöner werden. Entwickler können je nach Bedarf Änderungen und Erweiterungen vornehmen, um komplexere und effizientere Tabelleneinstellungen zu erreichen.

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