JavaScript を使用してセルを結合したテーブルを作成する方法-jsチュートリアル-php.cn

How to Create Tables with Merge Cells Using JavaScript?

JavaScript を使用した複雑なテーブルの作成

JavaScript では、

を使用してテーブルの作成を実行できます。そして要素。ただし、場合によっては、より複雑な構造のテーブルが必要になります。

課題: 特定のテーブル構造の作成

3 行のテーブルを作成する JavaScript 関数があるとします。各行に 2 つのセル。この関数をどのように調整して次のテーブルを作成できるでしょうか:

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

ログイン後にコピー

解決策: rowSpan を使用した行の結合

結合されたセルを含むテーブルを作成するには、以下が必要です。 rowSpan 属性を使用します。コードを変更する方法は次のとおりです:

JavaScript コード:

<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>

ログイン後にコピー

説明:

rowSpan 属性が 2 行目の 2 番目のセルに追加され、下のセルと結合されます。
セルの重複を防ぐため、j === 1 の反復では rowSpan を持つセルがスキップされます。

insertRow と 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>

ログイン後にコピー

この改良されたバージョンでは、より簡潔な実装のために insertRow メソッドと insertCell メソッドを使用します。

以上がJavaScript を使用してセルを結合したテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php

前の記事：JavaScript を使用して行スパンと結合セルを含む複雑な HTML テーブルを作成する方法次の記事：JavaScript で異なる行スパンとセルスパンを持つ複雑なテーブルを作成する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事