【學習筆記】-結合JQuery和Ajax實現區域性資料重新整理

Kevin_g.發表於2020-12-16
筆記jQuery
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>

			#title{
				text-align: center;
				/* 字型加粗 */
				font-weight: bolder;
				font-size: large;
			}
			table,
			table tr th,
			table tr td{
				/* 表格表框 */
				border: 1px solid;
				width: 300px;
				/* 合併邊框,collapse,邊框間距 */
				border-collapse: collapse;
				/*auto代表表格左右居中 */
				margin:auto;
			}
		</style>
	</head>
	<body>
		<input type="button" name="" id="btn" value="點我呀" />
		<hr>
		<div id="title">

		</div>
		<div id="ajaxtext">
			<table class="aja">

			</table>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#btn").click(function() {
					$.get("http://rap2api.taobao.org/app/mock/238982/api/students", function(result) {
						//清空table原有節點
						$(".aja").empty();
						//清空id=title的div節點
						$("#title").empty();
						
						$("#title").append("AJAX獲取資料資訊列表");
						$(".aja").append(
							`<tr>
								<th>id</th>
								<th>name</th>
								<th>age</th>
								<th>email</th>
							</tr>`
						);
						$.each(result.students, function(index, obj) {
							$(".aja").append(
								`<tr align="center">
								<td >${obj.id}</td>
								<td >${obj.name}</td>
								<td >${obj.age}</td>
								<td >${obj.email}</td>
								</tr>`
							);
						});
					})
				});
			});
		</script>
	</body>
</html>

相關文章