JavaScript を使用して行スパンと結合セルを含む複雑な HTML テーブルを作成する方法

JavaScript を使用して複雑な HTML テーブル構造を再作成する

この記事では、開発者が遭遇する特定の問題、つまり複合テーブルの作成について取り上げます。 JavaScriptを使用したHTMLテーブル構造。問題とその解決策を詳しく見てみましょう。

問題:

3 行 2 列の単純なテーブルを作成する JavaScript 関数が存在します。課題は、提供された HTML コードに示されているように、関数を変更して、さまざまな行範囲と結合されたセルを持つより複雑なテーブル構造を生成することです。

解決策:

これを達成するには、HTML DOM によって提供される組み込みの insertRow メソッドと insertCell メソッドを利用します。修正された JavaScript コードは次のとおりです。

<code class="javascript">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 &amp;&amp; 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 &amp;&amp; j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

説明:

コードはテーブルの行と列を反復処理し、insertCell を使用して個々のセルを作成し、それに応じてプロパティを設定します。条件 if (i === 1 && j === 1) { td.setAttribute('rowSpan', '2'); } が重要です。行 2 の結合されたセルの行幅を処理します。

insertRow メソッドと insertCell メソッドを使用することで、テーブル構造をより詳細に制御できるようになり、さまざまな行幅と結合されたセルを持つ複雑なテーブルを迅速かつ動的に作成できるようになります。 .

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