静态json数据表格渲染展示

静态json数据表格渲染展示

一:html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <table width="80%" style="text-align: center;" align="center" cellspacing="0" cellpadding="0" border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮件</th>
                    <th>生日</th>
                    <th>更新时间</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody id="dataContent">

            </tbody>
        </table>

</body>
<script type="text/javascript" src="../js/dateFormat.js"></script>
<script>
    // 作业的要求，是将改json数据，使用js的方式，渲染到表格中。
 var peoples = [
{"birthday":"2016-06-08","createTime":1466671190000,"email":"zhangfan@126.com","gender":"M","id":25,"name":"张三","updateTime":1567566352000},
{"birthday":"2016-06-06","createTime":1466671418000,"email":"zdf@163.com","gender":"M","id":35,"name":"李四","updateTime":1506055722000},
{"birthday":"2017-05-09","createTime":1495629797000,"email":"521@163.cn","gender":"M","id":36,"name":"小二","updateTime":1506055722000}
               ];
//获取对象
    var dataContent = document.getElementById('dataContent');
    //获取并展示数据
    peoples.forEach((value, index) => {
        // 向表格中插入一行
        var row = dataContent.insertRow();
//---------------------------------------------  
        // 向行中插入一个单元格
        var idCell = row.insertCell();
        // 向单元格中设置id数据
        idCell.innerText = value.id;
//----------------------------------------------
        // 向行中插入一个单元格
        var nameCell = row.insertCell();
        // 向单元格中设置name数据
        nameCell.innerText = value.name;
//----------------------------------------------
        // 向行中插入一个单元格
        var genderCell = row.insertCell();
        // 向单元格中设置gender数据
        genderCell.innerText = value.gender == 'F' ? '女' : '男';
//-----------------------------------------------
        // 向行中插入一个单元格
        var emailCell = row.insertCell();
        // 向单元格中设置email数据
        emailCell.innerText = value.email;
//-----------------------------------------------
        // 向行中插入一个单元格
        var birthdayCell = row.insertCell();
        // 向单元格中设置birthday数据
        birthdayCell.innerText = value.birthday;
//-----------------------------------------------
        // 向行中插入一个单元格
        var updateTimeCell = row.insertCell();
        // 向单元格中设置updateTime数据
        //因为原数据是时间戳,所以要转换和格式化
        updateTimeCell.innerText = formatDate(value.updateTime);
//-----------------------------------------------
        // 向行中插入一个单元格
        var createTimeCell = row.insertCell();
        // 向单元格中设置createTime数据
        //因为原数据是时间戳,所以要转换和格式化
        createTimeCell.innerText = formatDate(value.createTime);
    })

</script>
</html>

二:相关js代码(在前端的数据简单处理)

/**
 * 该方法返回日期的格式  yyyy-MM-dd HH:mm:ss
 * @param num    num为时间戳
 *              如果用户传入了参数那么就返回用户所需要的日期对应的格式，
 *             如果用户没有传入, 那么就返回当前返回当前系统日期
 */
function formatDate(num) {
    var date = null;
    // 用户传入num
    if(num) {
        date = new Date(num);
    }else { // 用户没有传入
        date = new Date();
    }

    var year = date.getFullYear(); //年份
    var month = date.getMonth(); //月份
    var day = date.getDate(); //获取日期

    var hour = date.getHours(); //小时
    var minute = date.getMinutes();  //分钟
    var second = date.getSeconds(); //获取秒

    // var fullMonth = (month + 1) < 10 ? '0' + (month + 1) : (month + 1);

    var fullMonth = getNumFullFormate(month + 1); //获取月份的完整格式
    var fullDay = getNumFullFormate(day);
    var fullHour = getNumFullFormate(hour);
    var fullMinute = getNumFullFormate(minute);
    var fullSecond = getNumFullFormate(second);


    // 2020-01-23 12:12:23
    return year + "-" + fullMonth + "-" + fullDay + " " + fullHour + ":" + fullMinute +              ":" + fullSecond;
}

function getNumFullFormate(num) {
    return num < 10 ? '0' + num : num;
}
posted @ 2020-04-27 10:41  JerryMouseJDK  阅读(784)  评论(0)  编辑  收藏  举报