Wie erstelle ich Tabellen mit zusammengeführten Zellen mithilfe von JavaScript?-js-Tutorial-php.cn

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>

Nach dem Login kopieren

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>

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!

Quelle：php

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

Erklärung dieser 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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2074

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2235

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1880

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...