首页
IT
登录
6mi
u
盘
搜
搜 索
IT
动态创建表格
动态创建表格
xiaoxiao
2021-04-18
45
<!DOCTYPE
HTML
>
<html>
<head>
<title>
动态创建表格
</title>
<meta
charset=
"utf-8"
/>
<style>
table
{
width
:
600
px
;
border-collapse
:collapse
;
text-align
:center
;
}
td,th
{
border
:
1
px solid
#ccc
}
</style>
<script>
//假如从服务端收到json字符串如下：
var
json=
'['
+
'{"ename":"Tom","salary":5000,"age":25},'
+
'{"ename":"John","salary":7000,"age":28},'
+
'{"ename":"Mary","salary":6000,"age":26}'
+
']'
;
//使用eval函数，将服务器端接收的json字符串，转化为js程序中可以识别的对象
var
emps=
eval
(
"("
+json+
")"
)
;
//创建节点片段来存储table中生成的tr片段
var
frag=
document
.
createDocumentFragment
()
//当页面加载后，在data div中创建table对象及子对象
window
.
onload
=
function
(){
//Step1: 创建空table对象
var
table=
document
.
createElement
(
"table"
)
;
//Step2: 添加表头行
// Step2.1: 创建空的tr对象，临时保存在tr中
// Step2.2: 创建3个空th对象，
// 第1个th对象的内容="姓名"
// 第2个th对象的内容="薪资"
// 第3个th对象的内容="年龄"
// Step2.3: 将3个th分别追加到tr对象下
// Step2.4: 将tr追加到table对象下
//Step3: 遍历emps数组中每个对象，创建主体内容
for
(
var
i=
0
;
i<emps.
length
;
i++){
// 每遍历一个对象，要创建一个空tr对象
var
tr=
document
.
createElement
(
"tr"
)
;
// 创建一个空td对象，其中放入当前对象的ename属性值
var
td1=
document
.
createElement
(
"td"
)
;
td1.
innerHTML
=emps[i].ename
;
// 创建一个空td对象，其中放入当前对象的salary属性值
var
td2=
document
.
createElement
(
"td"
)
;
td2.
innerHTML
=emps[i].salary
;
// 创建一个空td对象，其中放入当前对象的age属性值
var
td3=
document
.
createElement
(
"td"
)
;
td3.
innerHTML
=emps[i].age
;
// 将3个td都追加到tr下
tr.
appendChild
(td1)
;
tr.
appendChild
(td2)
;
tr.
appendChild
(td3)
;
// 将tr追加到frag片段下
frag.
appendChild
(tr) }
//Step final: 将文档片段一次性追加到父对象下
document
.
querySelector
(
"#data table"
).
appendChild
(frag) }
</script>
</head>
<body>
<div
id=
"data"
>
<table>
<tr>
<th>
姓名
</th>
<th>
薪资
</th>
<th>
年龄
</th>
</tr>
</table>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-674480.html
技术
最新回复
(
0
)
