Html DOM操作TABLE

钢锅發表於2024-07-14
HTML
<!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>

　　

相關文章