<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
script
src=
"./jquery-1.12.2.js"
></
script
>
<
body
>
<!-- 表格 -->
<
table
border=
"1"
width=
"200" ,
height=
"400"
cellpadding=
"0"
cellspacing=
"0"
style=
"border-collapse: collapse"
>
<
thead
>
<
tr
>
<
th
>姓名
</
th
>
<
th
>年级
</
th
>
<
th
>年纪
</
th
>
</
tr
>
</
thead
>
<
tbody
id=
"tbody"
style=
"text-align: center"
></
tbody
>
</
table
>
<!-- 触发按钮 -->
<
input
type=
"button"
value=
"点击"
id=
"btn"
>
</
body
>
<
script
>
// 模拟数据
var
data = [{
name:
"ming",
grade:
"3",
age:
"12"
}, {
name:
"mi",
grade:
"2",
age:
"11"
}, {
name:
"hong",
grade:
"1",
age:
"10"
}, ];
var
str=
"";
// 注册点击事件
$(
function () {
$(
"#btn").
on(
"click",
function(){
for (
var
i =
0;
i <
data.
length;
i++) {
// 拼接代码
str =
"<tr>" +
"<td>" +
data[
i].
name +
"</td>" +
"<td>" +
data[
i].
grade +
"</td>" +
"<td>" +
data[
i].
age +
"</td>" +
"</tr>"
}
// 渲染内容
$(
"#tbody").
html(
str);
})
})
<
/
script
>
</
html
>