您的位置：首页 > Web前端 > JavaScript

table显示json数据传递

2015-04-17 17:06 323 查看

<!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" 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航