jquery03-06通过json动态创建表格

来源：互联网发布：推广淘宝店铺的方法编辑：程序博客网时间：2024/05/14 13:56
<!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:"传智播客",            url:"http://baidu.com",            type:"北京it培训机构"        },{            name:"达内",            url:"http://danei.com",            type:"北京垃圾培训"        },{            name:"三人行",            url:"http://sanrenxing.com",            type:"河南垃圾"        }];        $(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>
0 0