静态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;
}