1. PingCode智库首页
  2. 百科

js怎么动态生成table

Edit2 • • 百科

js怎么动态生成table

动态生成表格（Table）的几种方法有：使用JavaScript的DOM操作、利用模板字符串、使用库如jQuery等。本文将详细介绍通过JavaScript动态生成表格的步骤和方法。

在JavaScript中动态生成表格的主要方法是通过DOM操作创建表格元素、使用模板字符串生成表格内容、结合数据动态填充表格。下面将详细介绍这三种方法中的一种：通过DOM操作创建表格元素。

一、DOM操作创建表格元素

1、准备数据

无论是生成静态表格还是动态表格，都需要有数据支持。数据可以来自后端接口、静态文件或者手动定义的数组等。

const data = [


    { name: "John Doe", age: 28, occupation: "Engineer" },


    { name: "Jane Smith", age: 34, occupation: "Designer" },


    { name: "Sam Brown", age: 22, occupation: "Developer" }


];

2、创建表格基本结构

首先，创建一个表格的基本框架。这包括创建表格（<table>）、表头（<thead>）和表体（<tbody>）元素。

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


const thead = document.createElement("thead");


const tbody = document.createElement("tbody");


table.appendChild(thead);


table.appendChild(tbody);

3、生成表头

表头通常包含表格的列标题。可以根据数据的键生成表头。

const headers = Object.keys(data[0]);


const tr = document.createElement("tr");


headers.forEach(header => {


    const th = document.createElement("th");


    th.textContent = header.charAt(0).toUpperCase() + header.slice(1);


    tr.appendChild(th);


});


thead.appendChild(tr);

4、生成表体

表体包含实际的数据行。遍历数据数组，为每一条数据生成一个表格行（<tr>），并在行内创建单元格（<td>）。

data.forEach(item => {


    const tr = document.createElement("tr");


    headers.forEach(header => {


        const td = document.createElement("td");


        td.textContent = item[header];


        tr.appendChild(td);


    });


    tbody.appendChild(tr);


});

5、将表格添加到DOM中

最后，将生成的表格插入到DOM中的某个容器元素中，以便显示在页面上。

document.getElementById("table-container").appendChild(table);

6、完整示例

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Dynamic Table</title>


</head>


<body>


    <div id="table-container"></div>


    <script>


        const data = [


            { name: "John Doe", age: 28, occupation: "Engineer" },


            { name: "Jane Smith", age: 34, occupation: "Designer" },


            { name: "Sam Brown", age: 22, occupation: "Developer" }


        ];


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


        const thead = document.createElement("thead");


        const tbody = document.createElement("tbody");


        table.appendChild(thead);


        table.appendChild(tbody);


        const headers = Object.keys(data[0]);


        const tr = document.createElement("tr");


        headers.forEach(header => {


            const th = document.createElement("th");


            th.textContent = header.charAt(0).toUpperCase() + header.slice(1);


            tr.appendChild(th);


        });


        thead.appendChild(tr);


        data.forEach(item => {


            const tr = document.createElement("tr");


            headers.forEach(header => {


                const td = document.createElement("td");


                td.textContent = item[header];


                tr.appendChild(td);


            });


            tbody.appendChild(tr);


        });


        document.getElementById("table-container").appendChild(table);


    </script>


</body>


</html>

二、利用模板字符串生成表格内容

1、准备数据

与DOM操作方法一样，需要有数据支持。

const data = [


    { name: "John Doe", age: 28, occupation: "Engineer" },


    { name: "Jane Smith", age: 34, occupation: "Designer" },


    { name: "Sam Brown", age: 22, occupation: "Developer" }


];

2、生成表头

通过模板字符串生成表头。

const headers = Object.keys(data[0]);


const theadContent = `<tr>${headers.map(header => `<th>${header.charAt(0).toUpperCase() + header.slice(1)}</th>`).join('')}</tr>`;

3、生成表体

同样通过模板字符串生成表体。

const tbodyContent = data.map(item => {


    return `<tr>${headers.map(header => `<td>${item[header]}</td>`).join('')}</tr>`;


}).join('');

4、生成完整表格

将表头和表体拼接生成完整表格。

const tableContent = `<table><thead>${theadContent}</thead><tbody>${tbodyContent}</tbody></table>`;

5、将表格添加到DOM中

将生成的表格插入到DOM中的某个容器元素中。

document.getElementById("table-container").innerHTML = tableContent;

6、完整示例

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Dynamic Table</title>


</head>


<body>


    <div id="table-container"></div>


    <script>


        const data = [


            { name: "John Doe", age: 28, occupation: "Engineer" },


            { name: "Jane Smith", age: 34, occupation: "Designer" },


            { name: "Sam Brown", age: 22, occupation: "Developer" }


        ];


        const headers = Object.keys(data[0]);


        const theadContent = `<tr>${headers.map(header => `<th>${header.charAt(0).toUpperCase() + header.slice(1)}</th>`).join('')}</tr>`;


        const tbodyContent = data.map(item => {


            return `<tr>${headers.map(header => `<td>${item[header]}</td>`).join('')}</tr>`;


        }).join('');


        const tableContent = `<table><thead>${theadContent}</thead><tbody>${tbodyContent}</tbody></table>`;


        document.getElementById("table-container").innerHTML = tableContent;


    </script>


</body>


</html>

三、使用jQuery库生成表格

1、准备数据

与前面的示例一样，需要有数据支持。

const data = [


    { name: "John Doe", age: 28, occupation: "Engineer" },


    { name: "Jane Smith", age: 34, occupation: "Designer" },


    { name: "Sam Brown", age: 22, occupation: "Developer" }


];

2、生成表头

通过jQuery生成表头。

const headers = Object.keys(data[0]);


const $thead = $("<thead>");


const $tr = $("<tr>");


headers.forEach(header => {


    const $th = $("<th>").text(header.charAt(0).toUpperCase() + header.slice(1));


    $tr.append($th);


});


$thead.append($tr);

3、生成表体

通过jQuery生成表体。

const $tbody = $("<tbody>");


data.forEach(item => {


    const $tr = $("<tr>");


    headers.forEach(header => {


        const $td = $("<td>").text(item[header]);


        $tr.append($td);


    });


    $tbody.append($tr);


});

4、生成完整表格

将表头和表体拼接生成完整表格。

const $table = $("<table>").append($thead).append($tbody);

5、将表格添加到DOM中

将生成的表格插入到DOM中的某个容器元素中。

$("#table-container").append($table);

6、完整示例

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Dynamic Table</title>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>


<body>


    <div id="table-container"></div>


    <script>


        const data = [


            { name: "John Doe", age: 28, occupation: "Engineer" },


            { name: "Jane Smith", age: 34, occupation: "Designer" },


            { name: "Sam Brown", age: 22, occupation: "Developer" }


        ];


        const headers = Object.keys(data[0]);


        const $thead = $("<thead>");


        const $tr = $("<tr>");


        headers.forEach(header => {


            const $th = $("<th>").text(header.charAt(0).toUpperCase() + header.slice(1));


            $tr.append($th);


        });


        $thead.append($tr);


        const $tbody = $("<tbody>");


        data.forEach(item => {


            const $tr = $("<tr>");


            headers.forEach(header => {


                const $td = $("<td>").text(item[header]);


                $tr.append($td);


            });


            $tbody.append($tr);


        });


        const $table = $("<table>").append($thead).append($tbody);


        $("#table-container").append($table);


    </script>


</body>


</html>

总结：通过JavaScript动态生成表格的方法有很多种，其中最常用的是通过DOM操作创建表格元素、利用模板字符串生成表格内容和使用jQuery库生成表格。每种方法都有其优点和适用场景，选择合适的方法可以提高开发效率和代码可维护性。

相关问答FAQs：

Q1: 如何使用JavaScript动态生成表格？
A1: 你可以使用JavaScript的DOM操作来动态生成表格。通过使用createElement方法来创建table、tr和td元素，并使用appendChild方法将它们添加到文档中，就可以实现动态生成表格的功能。

Q2: 如何在JavaScript中向表格添加数据？
A2: 你可以使用JavaScript的innerHTML属性或者createElement方法来向表格中的单元格添加数据。通过获取表格的特定单元格（使用querySelector或getElementById方法），然后将数据赋值给innerHTML属性，或者创建一个文本节点并将其附加到单元格中，就可以向表格中添加数据。

Q3: 如何在JavaScript中动态设置表格的样式？
A3: 你可以使用JavaScript来动态设置表格的样式。通过获取表格的特定元素（使用querySelector或getElementById方法），然后使用style属性来设置样式属性（如backgroundColor、color、border等），就可以实现动态设置表格样式的功能。你还可以使用classList属性来添加或删除CSS类，以实现更复杂的样式修改。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3798742

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部