一组JS创建和操作表格的函数集合

一、创建表格的函数

1. createTable(rows, cols, containerId)

创建一个 rows 行和 cols 列的表格，并将其插入到指定容器中。

代码块示例：

function createTable(rows, cols, containerId) {
  let container = document.getElementById(containerId);
  let table = document.createElement('table');
  for (let i = 0; i < rows; i++) {
    let tr = document.createElement('tr');
    for (let j = 0; j < cols; j++) {
      let td = document.createElement('td');
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  container.appendChild(table);
}

调用示例：

createTable(3, 4, 'table-container');

1. createTableWithData(data, containerId)

创建一个带有数据的表格，并将其插入到指定容器中。data 是一个二维数组，每个元素代表一个单元格的内容。

代码块示例：

function createTableWithData(data, containerId) {
  let container = document.getElementById(containerId);
  let table = document.createElement('table');
  for (let i = 0; i < data.length; i++) {
    let tr = document.createElement('tr');
    for (let j = 0; j < data[i].length; j++) {
      let td = document.createElement('td');
      td.appendChild(document.createTextNode(data[i][j]));
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  container.appendChild(table);
}

调用示例：

let data = [
  ['Name', 'Age', 'Gender'],
  ['Tom', 20, 'Male'],
  ['Anna', 18, 'Female'],
  ['Bob', 22, 'Male']
];
createTableWithData(data, 'table-container');

二、操作表格的函数

1. getCell(tableId, row, col)

获取指定表格中指定行列位置的单元格。

代码块示例：

function getCell(tableId, row, col) {
  let table = document.getElementById(tableId);
  let tr = table.rows[row];
  let td = tr.cells[col];
  return td;
}

调用示例：

let cell = getCell('my-table', 2, 3);

1. setCellText(tableId, row, col, text)

设置指定表格中指定行列位置的单元格的文本内容。

代码块示例：

function setCellText(tableId, row, col, text) {
  let table = document.getElementById(tableId);
  let tr = table.rows[row];
  let td = tr.cells[col];
  td.innerText = text;
}

调用示例：

setCellText('my-table', 2, 3, 'Hello, World!');