<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拼接html的方式设置tbody</title>
</head>
<body>
<!-- 点击按钮显示信息 -->
<input type="button" value="查看学生信息列表" id="btndisplay">
<table border="1px" width="40%">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tbody id="stutbody">
<!-- <tr>
<td>01</td>
<td>张三</td>
<td>19</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>20</td>
</tr>
<tr>
<td>03</td>
<td>王五</td>
<td>18</td>
</tr> -->
</tbody>
</table>
<!-- 自动计数 -->
总记录条数:<span id="totalSpan">0</span>条
</body>
</html>
<script>
//收到Java的json格式字符串
var fromJava = "{\"total\":3,\"students\":[{\"id\":01,\"name\":\"张三\",\"age\":20},{\"id\":02,\"name\":\"李四\",\"age\":19},{\"id\":03,\"name\":\"王五\",\"age\":18}]}"
//绑定按钮事件
window.onload = function(){
document.getElementById("btndisplay").onclick = function(){
console.log("显示学生信息")
//解析json格式字符串
window.eval("var json = "+fromJava)
//设置总记录条数
document.getElementById("totalSpan").innerHTML = json.total
//循环填入表格
var studentArr = json.students//拿到学生数组
var html = ""
for(var i =0; i < studentArr.length; i++){
//去除学生
var stu = studentArr[i]
html += "<tr>" //相当于html=html+"<tr>"
html += "<td>"+(i+1)+"</td>"
html += "<td>"+stu.name+"</td>"
html += "<td>"+stu.age+"</td>"
html += "</tr>"
}
//拼接到tbody中
document.getElementById("stutbody").innerHTML = html
}
}
</script>
01-19
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交