JS添加,刪除表格中的行那些事


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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com