JavaScript でテーブル作成関数を変更して、行数とセル数が変化する特定のレイアウトを実現するにはどうすればよいですか?

特定のレイアウトのテーブル作成関数を変更する

3 行と 2 つのセルを含むテーブルを作成するように設計された JavaScript 関数を考慮して、この質問では変更方法についてのガイダンスを求めます。これは、3 つの行があり、最初と 3 行目にはセルが 2 つしかなく、2 行目には 2 行にまたがるセルが 1 つだけあるという特定のテーブル レイアウトを複製するためです。

JavaScript コードの適応:

既存の関数は、次に示すように、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);
}</code>

このコード:

• 幅 100 ピクセルで黒い枠線の表を作成します。
• 3 行をループし、毎回新しい行を作成します。
• 各行について、2 列をループします。 、各列に新しいセルを作成します。
• rowSpan 属性を 2 に設定することで、2 番目の行が 2 行にまたがるように調整します。
• 2 番目のループから抜け出すために行とセルのインデックスを検査します。

最終結果:

変更した tableCreate 関数を実行すると、指定されたレイアウトでテーブルが生成されます:

Cell I0/J0	Cell I0/J1
Cell I1/J0	Cell I1/J1
Cell I2/J0

以上がJavaScript でテーブル作成関数を変更して、行数とセル数が変化する特定のレイアウトを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。