Javascript を使用してカスタム テーブル構造を作成するには?

JavaScript を使用した特定のテーブル構造の作成

リクエストには、で指定したものとは異なる、独自の構造を持つテーブルの作成が含まれています。あなたのコード。これを実現するために、JavaScript 関数の修正バージョンを調べてみましょう。

<code class="javascript">function createTable() {
  // Get the body element for table insertion
  var body = document.querySelector("body");

  // Create the table and table body elements
  var table = document.createElement("table");
  table.style.width = "100%";
  table.style.border = "1px solid black";
  var tableBody = document.createElement("tbody");

  // Set up the table rows and columns
  for (var i = 0; i < 3; i++) {
    var row = tableBody.insertRow();
    for (var j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        // Skip cell for the bottom right corner
        continue;
      } else {
        var cell = row.insertCell();
        cell.appendChild(document.createTextNode(`Cell at row ${i}, column ${j}`));
        cell.style.border = "1px solid black";
        if (i === 1 && j === 1) {
          // Set a rowspan of 2 for the specific cell
          cell.setAttribute("rowspan", "2");
        }
      }
    }
  }

  // Append the table body to the table
  table.appendChild(tableBody);

  // Append the table to the body of the page
  body.appendChild(table);
}

createTable();</code>

この修正されたコードでは、insertRow() メソッドと insertCell() メソッドを利用して、テーブルの行とセルを直接作成します。主な違いと最適化は次のとおりです。

• テーブル要素の枠線属性ではなく、CSS スタイルを使用してテーブルの幅と枠線を設定します。
• セルの行幅 2 を作成します。 2 行目、2 列目。
• セルが必要ない右下隅のセルの作成をスキップします。
• わかりやすくするために、変数に一貫した命名規則 (キャメルケース) を使用します。

以上がJavascript を使用してカスタム テーブル構造を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。