JavaScript中的表格（Tablica w JavaScript）

在JavaScript中，我们可以通过使用HTML表格标签来创建表格。但是，我们也可以使用JavaScript来创建和操作表格。下面让我们来学习如何在JavaScript中操作表格。

创建表格

要在JavaScript中创建表格，我们可以使用以下步骤：

1. 创建一个包含所有表格数据的JavaScript数组。

let tableData = [
  ["Name", "Age", "Gender"],
  ["John Doe", 25, "Male"],
  ["Jane Doe", 30, "Female"],
  ["Bob Smith", 40, "Male"]
];

2. 创建一个空的HTML表格元素。

let table = document.createElement("table");

3. 遍历JavaScript数组，并将每个元素添加到HTML表格中。

for (let i = 0; i < tableData.length; i++) {
  let row = document.createElement("tr");
  for (let j = 0; j < tableData[i].length; j++) {
    let cell = document.createElement("td");
    cell.appendChild(document.createTextNode(tableData[i][j]));
    row.appendChild(cell);
  }
  table.appendChild(row);
}

4. 将HTML表格添加到页面中。

document.body.appendChild(table);

操作表格

在JavaScript中，我们可以使用以下方法来操作表格。

获取表格元素

我们可以使用document.getElementById()方法或document.getElementsByTagName()方法来获取表格元素。

let table = document.getElementById("myTable");
// 或者
let tables = document.getElementsByTagName("table");
let table = tables[0]; // 获取第一个表格

获取表格行和单元格

要获取表格的行和单元格，我们可以使用以下方法：

let rows = table.rows; // 获取所有行
let row = rows[0]; // 获取第一行
let cells = row.cells; // 获取行中的所有单元格
let cell = cells[0]; // 获取第一个单元格

插入行和单元格

我们可以使用以下方法在表格中插入新行和单元格：

let newRow = table.insertRow(0); // 在第一行之前插入新行
let newCell = newRow.insertCell(0); // 在新行中插入一个新单元格
newCell.innerHTML = "New Cell"; // 将新单元格设置为文本 "New Cell"

删除行和单元格

我们可以使用以下方法删除表格中的行和单元格：

let rows = table.rows;
let row = rows[0];
let cells = row.cells;
let cell = cells[0];

// 删除行
row.parentNode.removeChild(row);

// 删除单元格
row.deleteCell(cell);

修改行和单元格

我们可以使用以下方法修改表格中的行和单元格：

// 修改行
row.style.backgroundColor = "red";
row.style.fontWeight = "bold";

// 修改单元格
cell.innerHTML = "New Cell Value";
cell.style.backgroundColor = "blue";

结论

有了这些操作表格的方法，我们可以在JavaScript中轻松地创建、操作和修改HTML表格。