JavaScript与DOM组合动态创建表格实例

下面我来详细讲解如何使用JavaScript与DOM组合动态创建表格实例。

简介

在Web开发中，表格是数据展示的常用形式之一，但是在页面中手动编写表格代码比较繁琐，因此我们可以使用JavaScript与DOM结合创建表格。

创建表格的步骤

1.创建表格元素

首先需要使用JavaScript创建表格元素，可以使用document.createElement方法创建表格元素。如下所示：

var table = document.createElement('table');

这段代码会创建一个table元素。

2.创建表头

接下来需要创建表头，可以使用insertRow方法创建表格行元素，再使用insertCell方法创建单元格元素，然后添加到表头行中。如下所示：

var headRow = table.insertRow(0);  // 创建表头行元素

var th1 = document.createElement('th');  // 创建表头单元格元素
th1.innerHTML = 'ID';  // 设置单元格内容
headRow.appendChild(th1);  // 添加到表头行中

var th2 = document.createElement('th');
th2.innerHTML = '姓名';
headRow.appendChild(th2);

var th3 = document.createElement('th');
th3.innerHTML = '年龄';
headRow.appendChild(th3);

这段代码会创建一个表格，表头包含3个单元格（ID、姓名、年龄）。

3.插入数据

最后需要插入数据，可以使用insertRow方法创建行元素，然后使用insertCell方法创建单元格元素，再设置单元格内容，最后添加到行中即可。如下所示：

for (var i = 0; i < data.length; i++) {  // data为数据数组
    var row = table.insertRow(-1);  // 创建数据行元素

    var cell1 = row.insertCell(0);  // 创建单元格元素
    cell1.innerHTML = data[i].id;  // 设置单元格内容

    var cell2 = row.insertCell(1);
    cell2.innerHTML = data[i].name;

    var cell3 = row.insertCell(2);
    cell3.innerHTML = data[i].age;
}

这段代码会将数据数组中的数据插入到表格中。

示例

下面通过两个示例演示如何使用JavaScript与DOM结合创建表格。

示例一：静态数据表格

首先创建一个HTML页面，然后在页面中添加一个按钮和一个用于展示表格的div。当用户点击按钮时，会在div中动态创建一个表格，并将静态数据插入到表格中。

HTML代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例一：静态数据表格</title>
</head>
<body>
    <button onclick="createTable()">创建表格</button>
    <div id="table-container"></div>
</body>
</html>

JavaScript代码如下：

function createTable() {
    var data = [
        {id: 1, name: '张三', age: 20},
        {id: 2, name: '李四', age: 22},
        {id: 3, name: '王五', age: 25},
        {id: 4, name: '赵六', age: 30}
    ];

    var container = document.getElementById('table-container');

    var table = document.createElement('table');
    container.appendChild(table);

    var headRow = table.insertRow(0);

    var th1 = document.createElement('th');
    th1.innerHTML = 'ID';
    headRow.appendChild(th1);

    var th2 = document.createElement('th');
    th2.innerHTML = '姓名';
    headRow.appendChild(th2);

    var th3 = document.createElement('th');
    th3.innerHTML = '年龄';
    headRow.appendChild(th3);

    for (var i = 0; i < data.length; i++) {
        var row = table.insertRow(-1);

        var cell1 = row.insertCell(0);
        cell1.innerHTML = data[i].id;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = data[i].name;

        var cell3 = row.insertCell(2);
        cell3.innerHTML = data[i].age;
    }
}

当用户点击按钮时，会创建一个表格，并将静态数据插入到表格中。

示例二：动态数据表格

首先创建一个HTML页面，然后在页面中添加一个输入框和一个用于展示表格的div。当用户输入文本时，会按照文本内容查询数据，并将查询结果动态展示在表格中。

HTML代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例二：动态数据表格</title>
</head>
<body>
    <input type="text" id="query-input" placeholder="请输入查询内容">
    <button onclick="query()">查询</button>
    <div id="table-container"></div>
</body>
</html>

JavaScript代码如下：

var data = [
    {id: 1, name: '张三', age: 20},
    {id: 2, name: '李四', age: 22},
    {id: 3, name: '王五', age: 25},
    {id: 4, name: '赵六', age: 30}
];

function query() {
    var queryText = document.getElementById('query-input').value;
    var queryResult = [];

    for (var i = 0; i < data.length; i++) {
        if (data[i].name.indexOf(queryText) >= 0) {
            queryResult.push(data[i]);
        }
    }

    var container = document.getElementById('table-container');
    container.innerHTML = '';

    if (queryResult.length > 0) {
        var table = document.createElement('table');
        container.appendChild(table);

        var headRow = table.insertRow(0);

        var th1 = document.createElement('th');
        th1.innerHTML = 'ID';
        headRow.appendChild(th1);

        var th2 = document.createElement('th');
        th2.innerHTML = '姓名';
        headRow.appendChild(th2);

        var th3 = document.createElement('th');
        th3.innerHTML = '年龄';
        headRow.appendChild(th3);

        for (var i = 0; i < queryResult.length; i++) {
            var row = table.insertRow(-1);

            var cell1 = row.insertCell(0);
            cell1.innerHTML = queryResult[i].id;

            var cell2 = row.insertCell(1);
            cell2.innerHTML = queryResult[i].name;

            var cell3 = row.insertCell(2);
            cell3.innerHTML = queryResult[i].age;
        }
    } else {
        container.innerHTML = '查询结果为空';
    }
}

当用户输入内容并点击查询按钮时，会动态生成表格，并将查询结果插入到表格中。

以上就是使用JavaScript与DOM结合动态创建表格的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript与DOM组合动态创建表格实例 - Python技术站