Wie erstelle ich eine komplexe Tabelle mit unterschiedlichen Zeilen- und Zellbereichen in JavaScript?

Erstellen einer komplexen Tabelle mit JavaScript

In JavaScript generiert die Funktion tableCreate() eine einfache Tabelle mit zwei Zeilen und zwei Zellen. Sie kann jedoch geändert werden, um eine komplexere Tabelle wie die bereitgestellte zu erstellen.

Um dies zu erreichen, ändern Sie die for-Schleifen innerhalb der Funktion und verwenden Sie die Methoden insertRow und insertCell, anstatt Elemente manuell zu erstellen. Hier ist der aktualisierte Code:

<code class="js">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 & 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>

Dieser geänderte Code erzeugt eine Tabelle mit drei Zeilen und zwei Zellen, wobei sich die zweite Zelle über zwei Zeilen erstreckt. Es verwendet CSS, um die Breite und die Ränder der Tabelle festzulegen. Beachten Sie, dass das rowSpan-Attribut zur sich überschneidenden Zelle hinzugefügt wird, um anzugeben, dass sie sich über mehrere Zeilen erstrecken soll.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine komplexe Tabelle mit unterschiedlichen Zeilen- und Zellbereichen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!