<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.my_bg {
background-color: yellow;
color: white;
}
</style>
<body>
<!--
假設現在從后台接受了一段關於訪客的信息數據(添加新的訪客信息從info里面按照順序拿取)
-->
<button class="add">添加一條新的訪客信息</button>
<button class="del">刪除選中</button>
<button class="sort">年齡從小到大</button>
<button class="all_in">全選</button>
<button class="all_no">返選</button>
<button class="sort_no">序列號從大到小</button>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>序列號</th>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
<th>選擇</th>
</tr>
</table>
<script type="text/javascript">
// info = [1,2,3,4]
var info = [{ //數組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
}
],
//獲取添加一條新的訪客信息的類名
add = document.querySelector(".add"),
//獲取刪除選中的類名
del = document.querySelector(".del"),
//獲取年齡從小到大的類名
sort = document.querySelector(".sort"),
//獲取table中的tbody信息
tb = document.querySelector("tbody"),
//獲取全選的類名
all_in = document.querySelector(".all_in"),
//獲取返選類名
all_no = document.querySelector(".all_no"),
//獲取序列號從大到小的類名
sort_no = document.querySelector(".sort_no"),
//下標從零開始
index = 0;
//給add添加點擊事件，添加一行內容
add.addEventListener("click", function() {
tb.innerHTML += "<tr><td>" + (index + 1) + "</td><td>" + info[index].name + "</td><td>" + info[index].age + "</td><td><button>刪除</button></td><td><input type = 'checkbox'></td></tr>";
//三目運算，目的當信息用完后，重復使用info內容
++index >= info.length ? index = 0 : "";
})
//給del添加點擊事件，當選中的input時，進行刪除
del.addEventListener("click", function() {
//獲取所有的input給一個變量checkboxs
var checkboxs = document.querySelectorAll("input");
//循環在checkboxs長度內的信息
for(var i = 0; i < checkboxs.length; i++) {
//三目運算，當checkboxs的下標是選中時，就刪除checkboxs下標的整行內容
checkboxs[i].checked ? checkboxs[i].parentNode.parentNode.remove() : "";
}
})
//給tb添加點擊監聽事件
tb.addEventListener("click", function(e) {
//三目運算，這里用到事件代理
e.target.nodeName == "BUTTON" ? e.target.parentNode.parentNode.remove() : "";
if(e.target.nodeName == "INPUT") {
if(e.target.checked) {
e.target.parentNode.parentNode.classList.add("my_bg");
} else {
e.target.parentNode.parentNode.classList.remove("my_bg");
}
}
})
//給sort添加點擊監聽事件
sort.addEventListener("click", function() {
//獲取所有行除去第一行
var trs = document.querySelectorAll("tr:not(:first-child)"),
//用一個新的數組trs_arr，后期用來儲存
trs_arr = new Array();
//循環
for(var i = 0; i < trs.length; i++) {
//把循環得到的數推到trs_arr數組中
trs_arr.push(trs[i]);
}
//排序
trs_arr.sort(function(a, b) {
return a.cells[2].innerText - b.cells[2].innerText;
})
for(var i = 0; i < trs_arr.length; i++) {
tb.appendChild(trs_arr[i]);
}
})
all_in.addEventListener("click", function() {
checked_inps(1);
})
function checked_inps(type) {
var inps = document.querySelectorAll("input");
switch(type) {
case 1:
for(var i = 0; i < inps.length; i++) {
inps[i].checked = true;
inps[i].parentNode.parentNode.classList.add("my_bg");
}
break;
case 2:
for(var i = 0; i < inps.length; i++) {
// inps[i].checked = !inps[i].checked;
if (inps[i].checked) {
inps[i].checked=false;
inps[i].parentNode.parentNode.classList.remove("my_bg");
}else{
inps[i].checked=true;
inps[i].parentNode.parentNode.classList.add("my_bg");
}
}
break;
}
}
all_no.addEventListener("click", function() {
checked_inps(2);
})
function add_bg() {
}
sort_no.addEventListener("click", function() { //從大到小排序
var trs = document.querySelectorAll("tr:not(:first-child)"),
trs_arr = new Array();
for(var i = 0; i < trs.length; i++) {
trs_arr.push(trs[i]);
}
trs_arr.sort(function(a, b) {
return b.cells[0].innerText - a.cells[0].innerText;//從大到小排序b-a，從小到大排序a-b，innerText元素的文本
})
for(var i = 0; i < trs_arr.length; i++) {
tb.appendChild(trs_arr[i]);
}
})
</script>
</body>
</html>