zoukankan      html  css  js  c++  java
  • 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>
        <title>json数据</title>
        <style type="text/css">
        .header{font-size:12px;line-height:22px;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" onclick="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>
    

      

  • 相关阅读:
    Linux常用操作命令总结
    Centos7安装FastDFS教程
    Permutation Sequence
    Next Permutation
    Remove Element
    4Sum
    3Sum Closest
    3Sum
    Longest Consecutive Sequence
    Median of Two Sorted Arrays
  • 原文地址:https://www.cnblogs.com/hjlost/p/4435454.html
Copyright © 2011-2022 走看看