Heim > Artikel > Web-Frontend > Wie erstelle ich Tabellen mit zusammengeführten Zellen mithilfe von JavaScript?

Wie erstelle ich Tabellen mit zusammengeführten Zellen mithilfe von JavaScript?

Mary-Kate OlsenOriginal: 2024-10-19 08:17:31331Durchsuche

How to Create Tables with Merge Cells Using JavaScript?

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:

<code class="html"><table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td rowspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table></code>

Lösung: Zeilenzusammenführung mit rowSpan

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>

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>

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!

JavaScript for using Attribute function this table tbody

Stellungnahme：

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

Vorheriger Artikel：Wie erstelle ich komplexe HTML-Tabellen mit Zeilenbereichen und zusammengeführten Zellen mithilfe von JavaScript?Nächster Artikel：Wie erstelle ich komplexe HTML-Tabellen mit Zeilenbereichen und zusammengeführten Zellen mithilfe von JavaScript?

In Verbindung stehende Artikel

Mehr sehen