靜態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;
}