Wie erstelle ich komplexe HTML-Tabellen mit Zeilenbereichen und zusammengeführten Zellen mithilfe von JavaScript?

Eine komplexe HTML-Tabellenstruktur mit JavaScript neu erstellen

In diesem Artikel befassen wir uns mit einem spezifischen Problem, auf das Entwickler stoßen: dem Erstellen einer komplexen HTML-Tabellenstruktur mit JavaScript. Schauen wir uns das Problem und seine Lösung genauer an.

Problem:

Es gibt eine JavaScript-Funktion, die eine einfache Tabelle mit 3 Zeilen und 2 Spalten erstellt. Die Herausforderung besteht darin, die Funktion zu ändern, um eine komplexere Tabellenstruktur mit unterschiedlichen Zeilenspannen und zusammengeführten Zellen zu generieren, wie im bereitgestellten HTML-Code dargestellt.

Lösung:

An Um dies zu erreichen, verwenden wir die integrierten Methoden insertRow und insertCell, die von HTML DOM bereitgestellt werden. Hier ist der überarbeitete JavaScript-Code:

<code class="javascript">function tableCreate() {
  const body = document.body,
        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 &amp;&amp; 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 &amp;&amp; j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

Erklärung:

Der Code iteriert über die Tabellenzeilen und -spalten, erstellt mit insertCell einzelne Zellen und legt deren Eigenschaften entsprechend fest. Die Bedingung if (i === 1 && j === 1) { td.setAttribute('rowSpan', '2'); } ist entscheidend. Es verwaltet den Zeilenbereich für die zusammengeführte Zelle in Zeile 2.

Durch die Verwendung der Methoden insertRow und insertCell haben wir eine bessere Kontrolle über die Tabellenstruktur, sodass wir schnell und dynamisch komplexe Tabellen mit unterschiedlichen Zeilenbereichen und zusammengeführten Zellen erstellen können .

Das obige ist der detaillierte Inhalt vonWie erstelle ich komplexe HTML-Tabellen mit Zeilenbereichen und zusammengeführten Zellen mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!