JavaScript で異なる行スパンとセルスパンを持つ複雑なテーブルを作成する方法

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

JavaScript では、tableCreate() 関数により 2 行と 2 つのセルからなる単純なテーブルが生成されます。ただし、提供されているような、より複雑なテーブルを作成するように変更することもできます。

これを実現するには、要素を手動で作成する代わりに、関数内の for ループを変更し、insertRow メソッドと insertCell メソッドを使用します。更新されたコードは次のとおりです。

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

tableCreate();</code>

この変更されたコードは、3 行と 2 つのセルからなるテーブルを生成し、2 番目のセルは 2 行にまたがります。 CSS を使用して表の幅と境界線を設定します。 rowSpan 属性が交差するセルに追加され、複数の行にまたがることを指定することに注意してください。

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