console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<button class="add">添加一条新的访客信息</button>
	<button class="del">删除选中</button>
	<button class="sort">年齡从小到大</button>
	<hr>
	<button class="sort_order">序列号从大到小</button>
	<button class="all_select">全选</button>
	<button class="reserve_select">反选</button>
	<hr>
	<input id="name" value="melon" />
	<input id="age" value="18" />
	<button class="insert">获取资料后插入数据</button>
	<hr>
	<table border="1" cellspacing="0" cellpadding="10">
		<tr>
			<th>序列号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
			<th>选择</th>
		</tr>
	</table>
	<script type="text/javascript">
		// JSON
		var info = [{
				name: "胡杭",
				age: 16
			},
			{
				name: "胜明",
				age: 22
			},
			{
				name: "军毅",
				age: 21
			},
			{
				name: "晓华",
				age: 13
			},
			{
				name: "盛聪",
				age: 23
			},
			{
				name: "侦剑",
				age: 32
			},
			{
				name: "红翔",
				age: 25
			},
			{
				name: "超维",
				age: 18
			},
			{
				name: "士琪",
				age: 22
			},
			{
				name: "艳华",
				age: 20
			}
		];
		let addBtn = document.querySelector(".add");
		let delBtn = document.querySelector(".del");
		let sortBtn = document.querySelector(".sort");
		let tbody = document.querySelector("tbody");
		let info_index = 0;
		let index = 0;

		let sort_orderBtn = document.querySelector(".sort_order");
		let all_selBtn = document.querySelector(".all_select");
		let reserve_selBtn = document.querySelector(".reserve_select");
		let name = document.querySelector("#name");
		let age = document.querySelector("#age");
		let insertBtn = document.querySelector(".insert");
		let sortway = 0; //0是序列號排序 1是年齡排序;

		addBtn.addEventListener("click", function () {
			tbody.innerHTML +=
				`
					<tr>
						<td>${(index+1).toString().padStart(2,0)}</td>
						<td>${info[info_index].name}</td>
						<td>${info[info_index].age}</td>
						<td>
							<button class="delItem">删除</button>
						</td>
						<td><input class="checkbox" type="checkbox"></td>
					</tr>
				`;
			++index;
			(++info_index == info.length) && (info_index = 0);
		})

		tbody.addEventListener("click", function (e) {
			if (e.target.classList.contains("delItem")) {
				e.target.parentElement.parentElement.remove();
			}
		})

		delBtn.addEventListener("click", function () {
			let checkboxList = document.querySelectorAll("input:checked");
			checkboxList.forEach(function (inpObj) {
				inpObj.parentElement.parentElement.remove();
			})
		})
		sortBtn.addEventListener("click", function () {
			ageSort();
		})

		sort_orderBtn.addEventListener("click", function () {
			numSort()
		})

		all_selBtn.addEventListener("click", function () {
			let checkboxList = document.querySelectorAll(".checkbox");
			checkboxList.forEach(function (val) {
				val.checked = true;
			})
		})
		reserve_selBtn.addEventListener("click", function () {
			let checkboxList = document.querySelectorAll(".checkbox");
			checkboxList.forEach(function (val) {
				val.checked ? val.checked = false : val.checked = true;
			})
		})

		insertBtn.addEventListener("click", function () {
			tbody.innerHTML +=
				`
					<tr>
						<td>${(index+1).toString().padStart(2,0)}</td>
						<td>${name.value}</td>
						<td>${age.value}</td>
						<td>
							<button class="delItem">删除</button>
						</td>
						<td><input class="checkbox" type="checkbox"></td>
					</tr>
				`;
			index++;
			switch (sortway) {
				case (0): //序列號排序
					numSort()
					break;
				case (1): //年齡排序
					ageSort()
					break;
			}
		})

		function ageSort() {
			let trList = document.querySelectorAll("tr:not(:first-child)");
			[...trList].sort(function (a, b) {
				return a.children[2].innerText - b.children[2].innerText;
			}).forEach(function (trObj) {
				tbody.appendChild(trObj);
			})
			sortway = 1; //1為年齡排序
		}

		function numSort() {
			[...document.querySelectorAll("tr:not(:first-child)")].sort(function (a, b) {
				return b.children[0].innerText - a.children[0].innerText;
			}).forEach(function (trObj) {
				tbody.appendChild(trObj);
			})
			sortway = 0; //0為序列號排序
		}
	</script>
</body>

</html>