JavaScriptでテーブルを設定する方法

JavaScript は、インタラクティブな Web アプリケーションの作成に使用できる広く使用されているスクリプト言語であり、HTML テーブルの設定にも適しています。この記事では、JavaScript を使用して HTML テーブルをセットアップする方法 (テーブルの作成、行とセルの追加、スタイルの設定など) を紹介します。

1. HTML テーブルの作成

JavaScript でテーブルを作成するには 2 つの方法があります。 1 つ目は、innerHTML 属性を使用する方法です。コードは次のとおりです。

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML = "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr><tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>"; // 设置表格内容
document.body.appendChild(table); // 将表格添加到页面中

もう 1 つの方法は、DOM を使用してテーブルを作成する方法です。コードは次のとおりです。

var table = document.createElement("table"); // 创建一个table元素
var row1 = document.createElement("tr"); // 创建第一行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "第一行，第一列"; // 设置单元格内容
cell2.innerHTML = "第一行，第二列";
row1.appendChild(cell1); // 将单元格添加到行中
row1.appendChild(cell2);
var row2 = document.createElement("tr"); // 创建第二行
var cell3 = document.createElement("td"); // 创建第一列单元格
var cell4 = document.createElement("td"); // 创建第二列单元格
cell3.innerHTML = "第二行，第一列";
cell4.innerHTML = "第二行，第二列";
row2.appendChild(cell3); // 将单元格添加到行中
row2.appendChild(cell4);
table.appendChild(row1); // 将行添加到表格中
table.appendChild(row2);
document.body.appendChild(table); // 将表格添加到页面中

2. 追加します。行とセル

JavaScript でテーブルの行とセルを追加する方法も 2 つあります。 1 つは、innerHTML 属性を使用する方法です。コードは次のとおりです。

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML += "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr>"; // 添加一行
table.innerHTML += "<tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>";
document.body.appendChild(table); // 将表格添加到页面中

もう 1 つの方法は、DOM を使用して行とセルを追加する方法です。コードは次のとおりです。

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
table.appendChild(row); // 将行添加到表格中
document.body.appendChild(table); // 将表格添加到页面中

3. スタイルsettings

表のスタイル設定も JavaScript を使用して簡単に行えます。 style 属性を使用して行とセルのスタイルを設定できます。コードは次のとおりです:

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
cell1.style.border = "1px solid black"; // 设置单元格边框
cell2.style.border = "1px solid black";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
row.style.backgroundColor = "cyan"; // 设置行背景色
table.appendChild(row); // 将行添加到表格中
table.style.borderCollapse = "collapse"; // 设置表格边框合并
document.body.appendChild(table); // 将表格添加到页面中

概要:

この記事では、JavaScript を使用して HTML テーブル (表など) を設定する方法を紹介します。作成、行とセルの形式の追加、およびスタイル設定。 JavaScript を使用してテーブルを設定すると、テーブルのスタイルをより柔軟で美しくすることができます。開発者は、独自のニーズに応じて変更および拡張し、より複雑で効率的なテーブル設定を実現できます。

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