jquery將json數據放入表格當中

本文轉載自查看原文 2018-11-27 13:34 1639 jquery

數據：

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery之從ajax獲取json數據以表格的形式顯示在頁面上 Jquery解析Json字符串,並且動態生成數據表格Table jQuery——表格添加數據 python發郵件之郵件內放入表格 jQuery遍歷多層json數據用JQuery解析獲取JSON數據 Jquery Ajax 提交json數據 jQuery、ajax添加Json數據 jquery遍歷獲取帶checkbox表格的選中值以及遍歷json數組 EasyUI樹形表格顯示Json數據