jquery将json数据放入表格当中

攻城狮子豪技术 2022年11月9日

0 收藏 322 点赞 2,917 浏览 1021 个字

数据：

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>