jquery03-06通过json动态创建表格_jquery根据json数据生成表格-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53089811

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            /*边框折叠*/
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color:#404060;
            padding: 10px;
        }
        th{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color:#fff;
        }
        td{
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery1.11.3.js"></script>
    <script>
        var data = [{
            name:"123",
            url:"http://baidu.com",
            type:"444"
        },{
            name:"234",
            url:"http://danei.com",
            type:"444"
        },{
            name:"555",
            url:"http://sanrenxing.com",
            type:"666"
        }];
        $(function () {
            var strHTML = "";
            for( var i =0;i<data.length;i++){
                var temp = data[i];
                strHTML += "<tr>";
                strHTML += "    <td>"+temp.name+"</td>";
                strHTML += "    <td>"+temp.url+"</td>";
                strHTML += "    <td>"+temp.type+"</td>";
                strHTML += "</tr>";
            }
            $("#J_tbData").html(strHTML);
        });
    </script>
</head>
<body>
    <table>
        <thead>
        <tr>
            <th>标题</th>
            <th>地址</th>
            <th>说明</th>
        </tr>
        </thead>
        <tbody id="J_tbData">
        </tbody>
    </table>
</body>
</html>