后台的json数据在前台用ajax循环表格显示

HTML与JavaScript实现表格数据展示

原创于 2021-12-10 08:30:14 发布 · 668 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#json #ajax #javascript

java前端自学笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用HTML的`<thead>`标签创建表格表头，并结合JavaScript的for循环动态加载JSON数据到表格中。示例展示了求职者信息的表格布局，包括求职者ID、姓名和审核状态。通过关注本文，你可以学习到基本的前端数据展示技巧。

首先创建表头

<table border="1"cellspacing="0" width=600px id="list">
<thead>     //<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tr height=50px>
    <th>求职者ID</th>
    <th>姓名</th>
    <th>审核状态</th>
</tr>
</thead>

效果如下：

关于HTML的一些标签：HTML <thead> 标签 (w3school.com.cn)

aAjaxfor循环获取json数据

for (var i=0;i<data.length;i++) {
                                        $("#list").append(
                                            "<tr><td>" + data[i].worker_ID + "</td>"
                                            + "<td>" + data[i].worker_name + "</td>"
                                            + "<td>" + data[i].worker_state + "</td>" + "</tr>"
                                        );

关于JavaScript的相关语法：JavaScript For 循环 (w3school.com.cn)

最终效果：