JavaScript根据json生成html表格的示例代码

下面我将详细讲解如何使用JavaScript根据JSON数据生成HTML表格的完整攻略。

前置知识

在了解这个示例代码之前，需要你掌握一些HTML、CSS和JavaScript的基础知识，同时了解JSON数据格式以及如何创建JavaScript数组和对象。如果你还不熟悉这些知识，请先学习一下。

示例代码

下面是一个根据JSON数据动态生成HTML表格的示例代码。

<!DOCTYPE html>
<html>
<head>
    <title>动态生成表格</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="tableContainer"></div>

    <script>
        // JSON数据
        var jsonData = [
            { name: '张三', age: 20, gender: '男' },
            { name: '李四', age: 21, gender: '女' },
            { name: '王五', age: 22, gender: '男' }
        ];

        // 表格头部
        var tableHeader = '<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody>';

        // 表格行
        var tableRows = '';

        // 遍历JSON数据并生成表格行
        for (var i = 0; i < jsonData.length; i++) {
            tableRows += '<tr><td>' + jsonData[i].name + '</td><td>' + jsonData[i].age + '</td><td>' + jsonData[i].gender + '</td></tr>';
        }

        // 表格底部
        var tableFooter = '</tbody></table>';

        // 拼接HTML字符串
        var tableHtml = tableHeader + tableRows + tableFooter;

        // 将表格输出到页面
        document.getElementById('tableContainer').innerHTML = tableHtml;
    </script>
</body>
</html>

以上示例代码通过创建一个JSON数组，利用循环和拼接字符串的方式来动态生成HTML表格。具体步骤如下：

首先定义一个JSON数组，数组中包含多个对象，每个对象表示一行数据，对象的属性表示列的数据；
接着定义表格头部的HTML字符串，包含表格的结构和表头信息；
然后定义一个空字符串用于存储表格行的HTML代码；
遍历JSON数组，利用字符串拼接的方式将每一行的数据转换成HTML代码，并添加到表格行的HTML代码字符串中；
最后定义表格底部的HTML字符串，包含表格的结尾标签；
将表格头部、表格行和表格底部的HTML代码拼接起来，得到一个完整的HTML表格；
将表格输出到页面。

示例说明

以下是两个使用示例说明：

示例1

假设你有一个JSON格式的数据文件，其中包含了一些用户的信息，如姓名、年龄、性别等，你需要将这些数据显示在一个HTML表格中。

首先，你需要创建一个JSON数组，数组中的每个对象表示一行用户数据，对象的属性表示表格的每列数据。

然后，你可以使用JavaScript循环遍历JSON数组，并使用字符串拼接的方式动态生成HTML代码，最终将生成的表格输出到页面中。

例如，你可以使用以下JavaScript代码来实现：

// JSON数据
var jsonData = [
    { name: '张三', age: 20, gender: '男' },
    { name: '李四', age: 21, gender: '女' },
    { name: '王五', age: 22, gender: '男' }
];

// 表格头部
var tableHeader = '<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody>';

// 表格行
var tableRows = '';

// 遍历JSON数据并生成表格行
for (var i = 0; i < jsonData.length; i++) {
    tableRows += '<tr><td>' + jsonData[i].name + '</td><td>' + jsonData[i].age + '</td><td>' + jsonData[i].gender + '</td></tr>';
}

// 表格底部
var tableFooter = '</tbody></table>';

// 拼接HTML字符串
var tableHtml = tableHeader + tableRows + tableFooter;

// 将表格输出到页面
document.getElementById('tableContainer').innerHTML = tableHtml;

其中，tableContainer是页面中用于显示表格的容器元素的ID。这段代码会将生成的HTML表格添加到这个容器中。

示例2

假设你有一个JSON格式的数据文件，其中包含了一些课程的信息，如课程名称、学分、教师等，你需要将这些数据显示在一个HTML表格中，并添加一些样式。

首先，你需要定义一个CSS样式表，用于美化表格的样式。

然后，你可以使用JavaScript循环遍历JSON数组，并使用字符串拼接的方式动态生成HTML代码，最终将生成的带有样式的表格输出到页面中。

例如，你可以使用以下JavaScript代码来实现：

// JSON数据
var jsonData = [
    { name: '计算机科学导论', credit: 3, teacher: '李老师' },
    { name: '数据结构与算法', credit: 4, teacher: '张老师' },
    { name: '计算机网络', credit: 3, teacher: '王老师' }
];

// 表格头部
var tableHeader = '<table class="table"><thead><tr><th>课程名称</th><th>学分</th><th>教师</th></tr></thead><tbody>';

// 表格行
var tableRows = '';

// 遍历JSON数据并生成表格行
for (var i = 0; i < jsonData.length; i++) {
    tableRows += '<tr><td>' + jsonData[i].name + '</td><td>' + jsonData[i].credit + '</td><td>' + jsonData[i].teacher + '</td></tr>';
}

// 表格底部
var tableFooter = '</tbody></table>';

// 拼接HTML字符串
var tableHtml = tableHeader + tableRows + tableFooter;

// 将表格输出到页面
document.getElementById('tableContainer').innerHTML = tableHtml;

其中，tableContainer是页面中用于显示表格的容器元素的ID。此示例中，还定义了一个名为 table 的CSS类，用于定义表格的样式。

.table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 2px 2px #ccc;
}

.table th, .table td {
    text-align: center;
    padding: 8px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.table th {
    background-color: #f8f8f8;
    font-weight: normal;
    font-size: 16px;
    color: #333;
    border-top: none;
}

.table td {
    color: #666;
}

.table tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

这段代码定义了表格的边框、背景颜色、边距等样式，以及表头、表格行（偶数行）的背景颜色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript根据json生成html表格的示例代码 - Python技术站

JavaScript根据json生成html表格的示例代码

前置知识

示例代码

示例说明

示例1

示例2

相关文章