jquery将json数据放入表格当中

Posted xxcxxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery将json数据放入表格当中相关的知识，希望对你有一定的参考价值。

数据：

var datas = [{
        name:"淘宝",
        url:"www.taobao.com",
        type:"购物网站"
    },{
        name:"百度",
        url:"www.baidu.com",
        type:"搜索网站"
    },{
        name:"腾讯",
        url:"www.qq.com",
        type:"综合网站"
    }];

 

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格动态添加数据</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
<style>
    table{
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
    }
    th,td{
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }
    th{
        background-color: #0A7EC3;
        font: bold 16px "微软雅黑";
        color: #fff;
    }
</style>
<script type="text/javascript">
    var datas = [{
        name:"淘宝",
        url:"www.taobao.com",
        type:"购物网站"
    },{
        name:"百度",
        url:"www.baidu.com",
        type:"搜索网站"
    },{
        name:"腾讯",
        url:"www.qq.com",
        type:"综合网站"
    }];
    $(function () {
        var tableHtml = "";
        for(var i in datas){
            tableHtml += "<tr>";
            tableHtml +=    "<td>"+ datas[i].name +"</td>";
            tableHtml +=    "<td>"+ datas[i].url +"</td>";
            tableHtml +=    "<td>"+ datas[i].type +"</td>";
            tableHtml += "</tr>";
        }
        $("#aj_data").html(tableHtml);
    })
</script>
<table>
    <thead>
        <tr>
            <th width="">标题</th>
            <th>url</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody id="aj_data">
    </tbody>
</table>
</body>
</html>

 

以上是关于jquery将json数据放入表格当中的主要内容，如果未能解决你的问题，请参考以下文章

jquery循环输出json数据

如何将此 JSON 数据放入我的表格视图中？请帮助我，我生活在噩梦中:)

将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用

使用 Ajax Jquery 将 Json 结果返回的数据数组放入 DataTable 中

将没有 api 的 Instagram 主题标签 json 放入谷歌表格的问题

使用 JQuery 将 JSON 数组放入 HTML 列表