Wie erstelle ich Tabellen mit zusammengeführten Zellen mithilfe von JavaScript?
Mary-Kate Olsen
Freigeben： 2024-10-19 08:17:31
Original
331 Leute haben es durchsucht
Komplexe Tabellen mit JavaScript erstellen
In JavaScript kann die Erstellung von Tabellen mit der Funktion
durchgeführt werden. und Elemente. Manchmal sind jedoch Tabellen mit komplexeren Strukturen erforderlich.
Herausforderung: Erstellen einer spezifischen Tabellenstruktur
Angenommen, Sie haben eine JavaScript-Funktion, die eine Tabelle mit 3 Zeilen erstellt und 2 Zellen in jeder Zeile. Wie können Sie diese Funktion anpassen, um die folgende Tabelle zu erstellen:
Um die Tabelle mit einer zusammengeführten Zelle zu erstellen, benötigen Sie um das rowSpan-Attribut zu verwenden. So können Sie Ihren Code ändern:
JavaScript-Code:
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
for (let i = 0; i < 3; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
continue;
} else {
const cell = document.createElement('td');
cell.textContent = `Cell I${i}/J${j}`;
if (i === 1 && j === 1) {
cell.setAttribute('rowspan', '2');
}
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
body.appendChild(tbl);
}
tableCreate();</code>
Nach dem Login kopieren
Erklärung:
Der Das rowSpan-Attribut wird zur zweiten Zelle in der zweiten Zeile hinzugefügt und mit der Zelle darunter zusammengeführt.
Die Zelle mit rowSpan wird in der j === 1-Iteration übersprungen, um doppelte Zellen zu verhindern.
Verbesserter Shortcode mit insertRow und insertCell:
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for (let i = 0; i < 3; i++) {
const tr = tbl.insertRow();
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
break;
} else {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
td.style.border = '1px solid black';
if (i === 1 && j === 1) {
td.setAttribute('rowSpan', '2');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();</code>
Nach dem Login kopieren
Diese verbesserte Version verwendet die Methoden insertRow und insertCell für eine präzisere Implementierung.
Das obige ist der detaillierte Inhalt vonWie erstelle ich Tabellen mit zusammengeführten Zellen mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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
