<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作TABLE</title>
<style type="text/css">
.table-container{
}
caption{
padding: 10px;
font-size: 30px;
font-weight: bold;
}
table{
border-collapse: collapse;
width: 80%;
margin: 0px auto;
border: 1px solid #ddd;
}
th, td{
padding: 10px 10px;
text-align: center;
}
/* th固定在窗口顶部 */
th{
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #03A9F4;
color: #FFF;
border: 1px solid #ddd;
}
table tr:nth-child(odd){
background-color: #F2F2F2; /* 奇数行背景颜色 */
}
table tr:nth-child(even){
background-color: #F9F9F9; /* 奇数行背景颜色 */
}
</style>
<script src="https://config.net.cn/tools/static/Main/jquery.min.js"></script>
<script type="text/javascript">
var stu = [
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "张三", "sex": "男", "age": "20" },
{ "name": "李四", "sex": "男", "age": "18" },
{ "name": "王五", "sex": "男", "age": "19" },
];
/**
*
1.Js直接解析JSON;
2.AJAX去获取JSON(不跨域);
3.PHP中用cURL函数去获取JSON(任何URL)
*
**/
$(document).ready(function() {
var s = "";
for(var i = 0; i < stu.length; i++) {
id = i+1;
tr = "<tr>";
td = "<td>" + id + "</td><td>" + stu[i].name + "</td><td>" + stu[i].sex + "</td><td>" +
stu[i].age + "</td></tr>";
$("#tab").append(tr + td);
}
});
</script>
</head>
<body>
<div class="table-container">
<table id="tab" border="1" cellspacing="0">
<caption id="caption">caption<span id="p2" style="font-size: 16px;"> 自动刷新!<a href="?id=1">caption</a>
</span>
</caption>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>sex</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>文字描述</td>
<td>文字描述</td>
<td>文字描述</td>
<td>文字描述</td>
</tr>
</tbody>
<tfoot id="tfoot">
<tr style="background: #785d35;color: #FFF;">
<td>合计</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
标签：20,name,DOM,18,age,sex,Html,李四,TABLE From： https://www.cnblogs.com/zhouein/p/18301097