Wie ändere ich eine Tabellenerstellungsfunktion, um ein bestimmtes Layout mit unterschiedlichen Zeilen- und Zellenzahlen in JavaScript zu erreichen?

Ändern der Tabellenerstellungsfunktion für ein bestimmtes Layout

Angesichts einer JavaScript-Funktion, die zum Erstellen einer Tabelle mit 3 Zeilen und 2 Zellen entwickelt wurde, sucht diese Frage nach Anleitungen zum Ändern Es dient dazu, ein bestimmtes Tabellenlayout zu reproduzieren, bei dem es 3 Zeilen, aber nur 2 Zellen in der ersten und dritten Zeile gibt, während die zweite Zeile nur eine Zelle hat, die sich über zwei Zeilen erstreckt.

Anpassen des JavaScript-Codes :

Die vorhandene Funktion kann mit einem prägnanteren Ansatz mit den Methoden insertRow und insertCell angepasst werden, wie unten gezeigt:

<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);
}</code>

Dieser Code:

• Erstellt eine Tabelle mit einer Breite von 100 Pixeln und einem schwarzen Rand.
• Durchläuft 3 Zeilen und erstellt jedes Mal eine neue Zeile.
• Für jede Zeile werden 2 Spalten durchlaufen , wodurch für jede Spalte eine neue Zelle erstellt wird.
• Passt die zweite Zeile so an, dass sie sich über zwei Zeilen erstreckt, indem das rowSpan-Attribut auf 2 gesetzt wird.
• Überprüft die Zeilen- und Zellenindizes, um aus der zweiten Schleife auszubrechen für das gewünschte Layout.

Endergebnis:

Durch Ausführen der geänderten tableCreate-Funktion wird eine Tabelle mit dem angegebenen Layout generiert:

Cell I0/J0	Cell I0/J1
Cell I1/J0	Cell I1/J1
Cell I2/J0

Das obige ist der detaillierte Inhalt vonWie ändere ich eine Tabellenerstellungsfunktion, um ein bestimmtes Layout mit unterschiedlichen Zeilen- und Zellenzahlen in JavaScript zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!