假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取)

最新推荐文章于 2024-04-06 22:20:19 发布

Mr-吱吱

最新推荐文章于 2024-04-06 22:20:19 发布

阅读量440

点赞数

本文链接：https://blog.csdn.net/qq_35327397/article/details/78741391

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<button class="add">添加一条新的访客信息</button>
<button class="del">删除选中</button>
<button class="sort">从小到大</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">
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
}
];

add = document.querySelector(".add");
del = document.querySelector(".del");
sort = document.querySelector(".sort");
tb = document.querySelector("tbody"), //获取tbody
//声明一个变量
index = 0;

//添加功能
add.addEventListener("click", function() {
//console.log(info[0].name);
//往表格加东西
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>";
index++; //添加数据之后序列号自增1
//++index >= info.length ? index = 0 : ""; //三目运算

if(++index >= info.length) {
index = 0;
}

//删除方法
del.addEventListener("click", function() {
var checkboxs = document.querySelectorAll("input");
//验证 console.log(checkboxs[0].parentNode.parentNode.remove());//parentNode:选中父节点
/*
* 1.获取多选框
* 2.判断是否选中
* 3.根据选中状态删除行
*/
//遍历
for(var i = 0; i < checkboxs.length; i++) {
//检测是否选中，如果选中
if(checkboxs[i].checked) {
//tb.removeChild(checkboxs[0]).parentNode.remove();
checkboxs[i].parentNode.parentNode.remove();
}
}
});

//事件委托
tb.addEventListener("click", function(e) {
//检测是否选中button删除这个按钮
//console.log(e.target.nodeName);//target获取到标签,nodeName:检测节点名
if(e.target.nodeName == "BUTTON") {
console.log(e.target.parentNode.parentNode.remove());
}
});

//从大到小排序
sort.addEventListener("click", function() {
var trs = document.querySelectorAll("tr:not(first-child)");
//console.log(trs);
trs_arr = new Array();
for(var i = 0; i < trs.length; i++) {
trs_arr.push(trs[i]);
}
trs_arr.sort(function(a, b) {
//console.log(a.cells[2].innerText);
return a.cells[2].innerText - b.cells[2].innerText;
})
for(var i = 0; i < trs_arr.length; i++) {
tb.appendChild(trs_arr[i]);
}
});
})
</script>

</body>

</html>

Mr-吱吱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取)

假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.-->添加一条新的访客信息删除选中从小到大序列号姓名年龄操作选择var info = [{name: "胡杭",age: 16},{name: "胜明",age: 22},{
复制链接

扫一扫