<!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>