table显示json数据传递

最新推荐文章于 2022-08-24 14:19:06 发布

RabinRow

最新推荐文章于 2022-08-24 14:19:06 发布

阅读量262

点赞数

文章标签： json javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/hjlost/p/4435454.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>json数据</title>
    <style type="text/css">
    .header{font-size:12px;line-height:22px;width:100px;text-align:center;border-bottom: 1px solid #A5ACB5;border-right: 1px solid #A5ACB5;background-color: #E7EBEF;}
    .cell{font-size:9px;line-height:22px;text-align:center;border-bottom: 1px solid #d2d2d2;border-right: 1px solid #d2d2d2; }
    </style>
</head>
<body>
    <input type="button" οnclick="createCell()" value="createCell()" />
</body>
</html>
<script type="text/javascript">
    var data = [
        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" },
        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" },
        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" }
    ]

    function createCell() {
        var sb = [];
        sb[sb.length] = createHeader();
        for (var i = 0; i < data.length; i++) {
            var row = data[i];
            sb[sb.length] = '<tr>';
            sb[sb.length] = '<td class="cell">' + row.name + '</td>';
            sb[sb.length] = '<td class="cell">' + row.email + '</td>';
            sb[sb.length] = '<td class="cell">' + row.gender + '</td>';
            sb[sb.length] = '<td class="cell">' + row.number + '</td>';
            sb[sb.length] = '</tr>';
        }
        sb[sb.length] = '</table>';
        document.body.innerHTML = sb.join('');
    }

    function createHeader(){
        var headerHtml = '<table cellpadding=0 cellspacing=0 style="table-layout:fixed;border:1px solid #A5ACB5;">'
        + '<tr>'
        + '<td class="header">姓名</td>'
        + '<td class="header">邮件</td>'
        + '<td class="header">性别</td>'
        + '<td class="header">编号</td>'
        + '</tr>';
        return headerHtml;
    }
</script>

转载于:https://www.cnblogs.com/hjlost/p/4435454.html

RabinRow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table显示json数据传递

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫