js里表格怎么写

在JavaScript中，创建和操作表格可以通过直接操作DOM（文档对象模型）来实现。使用JavaScript操作表格的主要方法有：创建表格元素、添加行和单元格、填充数据、以及应用样式。下面我们详细探讨一下如何在JavaScript中编写和操作表格。

一、创建表格元素

在JavaScript中，创建表格的第一步是创建表格元素 <table>。可以使用document.createElement()方法来创建表格元素。

let table = document.createElement('table');
table.border = '1'; // 设置表格边框

二、添加表头和表格行

接下来，我们需要在表格中添加表头和多行数据。可以通过insertRow()方法插入新行，通过insertCell()方法插入单元格。

// 添加表头
let header = table.createTHead();
let headerRow = header.insertRow(0);
let cell1 = headerRow.insertCell(0);
let cell2 = headerRow.insertCell(1);
cell1.innerHTML = "<b>Header 1</b>";
cell2.innerHTML = "<b>Header 2</b>";
// 添加数据行
let row = table.insertRow(1);
let cell3 = row.insertCell(0);
let cell4 = row.insertCell(1);
cell3.innerHTML = "Data 1";
cell4.innerHTML = "Data 2";

三、填充数据

表格创建完毕后，可以使用循环来填充数据，特别是在处理大量数据时，这种方法尤为有效。

let data = [
    ["Row 1, Cell 1", "Row 1, Cell 2"],
    ["Row 2, Cell 1", "Row 2, Cell 2"],
    ["Row 3, Cell 1", "Row 3, Cell 2"]
];
data.forEach((rowData, rowIndex) => {
    let row = table.insertRow(rowIndex + 1); // +1 to account for the header row
    rowData.forEach((cellData, cellIndex) => {
        let cell = row.insertCell(cellIndex);
        cell.innerHTML = cellData;
    });
});

四、应用样式

可以通过JavaScript直接在表格元素上应用样式，或者通过向表格元素添加类名来应用外部CSS样式。

// 添加样式
table.style.width = '100%';
table.style.borderCollapse = 'collapse';
// 添加类名
table.className = 'my-table-class';

五、插入表格到DOM

创建完表格并填充数据后，需要将表格插入到DOM中，以便在网页上显示。可以使用appendChild()方法将表格元素插入到指定的父元素中。

document.body.appendChild(table);

六、动态更新表格

在实际应用中，可能需要动态更新表格数据。可以通过清空表格内容并重新填充数据来实现。

function updateTableData(newData) {
    // 清空现有表格内容
    table.innerHTML = '';
    // 重新添加表头
    let header = table.createTHead();
    let headerRow = header.insertRow(0);
    let cell1 = headerRow.insertCell(0);
    let cell2 = headerRow.insertCell(1);
    cell1.innerHTML = "<b>Header 1</b>";
    cell2.innerHTML = "<b>Header 2</b>";
    // 填充新数据
    newData.forEach((rowData, rowIndex) => {
        let row = table.insertRow(rowIndex + 1);
        rowData.forEach((cellData, cellIndex) => {
            let cell = row.insertCell(cellIndex);
            cell.innerHTML = cellData;
        });
    });
}
// 示例新数据
let newData = [
    ["New Row 1, Cell 1", "New Row 1, Cell 2"],
    ["New Row 2, Cell 1", "New Row 2, Cell 2"]
];
updateTableData(newData);

七、综合实例

以下是一个综合实例，将上述所有步骤结合在一起，在网页上动态创建和更新表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Table Example</title>
    <style>
        .my-table-class {
            width: 100%;
            border-collapse: collapse;
        }
        .my-table-class th, .my-table-class td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .my-table-class th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<button onclick="updateTableData(newData)">Update Table</button>
<script>
    // 创建表格
    let table = document.createElement('table');
    table.border = '1';
    table.className = 'my-table-class';
    // 添加表头
    let header = table.createTHead();
    let headerRow = header.insertRow(0);
    let cell1 = headerRow.insertCell(0);
    let cell2 = headerRow.insertCell(1);
    cell1.innerHTML = "<b>Header 1</b>";
    cell2.innerHTML = "<b>Header 2</b>";
    // 初始数据
    let data = [
        ["Row 1, Cell 1", "Row 1, Cell 2"],
        ["Row 2, Cell 1", "Row 2, Cell 2"],
        ["Row 3, Cell 1", "Row 3, Cell 2"]
    ];
    data.forEach((rowData, rowIndex) => {
        let row = table.insertRow(rowIndex + 1);
        rowData.forEach((cellData, cellIndex) => {
            let cell = row.insertCell(cellIndex);
            cell.innerHTML = cellData;
        });
    });
    // 插入表格到DOM
    document.body.appendChild(table);
    // 更新表格数据函数
    function updateTableData(newData) {
        table.innerHTML = '';
        let header = table.createTHead();
        let headerRow = header.insertRow(0);
        let cell1 = headerRow.insertCell(0);
        let cell2 = headerRow.insertCell(1);
        cell1.innerHTML = "<b>Header 1</b>";
        cell2.innerHTML = "<b>Header 2</b>";
        newData.forEach((rowData, rowIndex) => {
            let row = table.insertRow(rowIndex + 1);
            rowData.forEach((cellData, cellIndex) => {
                let cell = row.insertCell(cellIndex);
                cell.innerHTML = cellData;
            });
        });
    }
    // 示例新数据
    let newData = [
        ["New Row 1, Cell 1", "New Row 1, Cell 2"],
        ["New Row 2, Cell 1", "New Row 2, Cell 2"]
    ];
</script>
</body>
</html>

通过上述步骤，我们可以在JavaScript中创建、操作和更新表格。这种方法在处理动态数据和复杂表格结构时非常有用。掌握这些基本技能，将有助于你在前端开发中更好地操作和管理表格数据。