1. 效果：
image.png
2. 原理：
- es6语法添加结构 --- 用反单引号
- 动态添加td时，系统会加多一个tbody
- 将类数组转换为数组：Array.prototype.slice.call(check);
3. 实现代码：
html
<div class="web">
<div class="userInfo">
<input type="text" placeholder="请输入用户名" name="_name" id="_name" value="" />
<input type="text" placeholder="请输入学号" name="_num" id="_num" value="" />
<input type="text" placeholder="请输入年龄" name="_age" id="_age" value="" />
<input type="button" id="add" value="添加" />
<input type="button" id="sort" value="排序" />
<input type="button" class="delSel" value="删除选中"/>
</div>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>
操作
<button class="allSel">全选</button>
</th>
</tr>
</table>
<div class="search">
<input type="search" />
<input type="button" name="" id="" value="搜索" />
</div>
</div>
css
.userInfo,.search{
width: 60%;
margin: 0 auto;
}
.userInfo input{
width: 23%;
margin: 10px;
}
table{
width: 60%;
text-align: center;
margin: 10px auto;
}
table td{
height: 25px;
}
button{
-webkit-user-select: none;
/*用户不可选择背景*/
}
js
var add = document.querySelector('#add');
var table = document.querySelector('table');
var userInfo = document.querySelectorAll("input[type=text]");//***
///监听添加事件
add.addEventListener("click",function(){
//es6语法 ：用反单引号！！！！ 优点：结构清晰方便查看
var tr = `<tbody>
<tr>
<td>${userInfo[0].value}</td>
<td>${userInfo[1].value}</td>
<td>${userInfo[2].value}</td>
<td>
<button class="del">删除</button>
<button class="change">修改</button>
<button class="confirmChange">确认修改</button>
<input type ="checkbox" id="check"/>
</td>
</tr>
</tbody>`;
table.innerHTML += tr;
//添加完数据后，清除表单元素内容
for(var i=0;i<userInfo.length;i++){
userInfo[i].value="";
}
//调用删除功能 ***
del('.del');
//调用修改功能
changeInfo(".change",".confirmChange");
})
函数定义：
//删除功能 --- 全局定义
function del(el){
var delBtn = document.querySelectorAll(el);//el 参数不能加引号
for(let i=0;i<delBtn.length;i++){//这里一定要用let
delBtn[i].addEventListener("click",function(){
delBtn[i].parentNode.parentNode.parentNode.remove()
//这里的let 自己有一个块级作用域，外面的获取不到里面的！可以用delBtn[i]
})
}
}
//修改和确认修改功能 --- 全局定义
function changeInfo(changeElBtn,confirmElBtn){
var changeBtn = document.querySelectorAll(changeElBtn);
var confirmBtn = document.querySelectorAll(confirmElBtn);
//修改
for(let j=0;j<changeBtn.length;j++){
changeBtn[j].addEventListener("click",function(){
var allTd = this.parentNode.parentNode.children;
for(var i=0;i<(allTd.length)-1;i++){
allTd[i].contentEditable = true;//设置可修改的
}
allTd[0].focus();//第一个自动聚焦
})
}
//确认修改
for(let j=0;j<changeBtn.length;j++){
confirmBtn[j].addEventListener("click",function(){
var allTd2 = this.parentNode.parentNode.children;
for(var i=0;i<(allTd2.length)-1;i++){
allTd2[i].contentEditable = false;//将可修改变成不可修改
}
})
}
}
//搜索 --- 全局定义
function search(el){
var search = document.querySelector(el),
searchBtn = search.querySelector("input[type=button]"),//获取搜索按钮
searchCont = search.querySelector("input[type=search]");//获取搜索输入框内容
searchBtn.addEventListener("click",function(){
var allTr = table.querySelectorAll("tr")
for(var i=0;i<allTr.length;i++){
if(searchCont.value.trim()==allTr[i].children[0].innerText.trim()){
//trim() 去除空格干扰
allTr[i].style.background="skyblue";
}else{
allTr[i].style.background="white";
}
}
})
}
//调用搜索功能
search(".search");
//排序功能 --- 全局定义
function order(el){
var orderBtn = document.querySelector(el);
var isClick = true;//这个一点要在点击外面声明
orderBtn.addEventListener("click",function(){
var allTr = table.querySelectorAll("tbody");
//如果这里用tr的话，排序后是从tr中将tbody中抽出来的，删除功能一点击是直接删除掉了爸爸table
//将所有的tbody放在一个新建的数组里比较后再渲染出来
var arr = [];
for(var i=0;i<allTr.length;i++){
arr.push(allTr[i]);
}
//根据年龄那一列冒泡排序tr：
for(var i=1;i<arr.length;i++){
for(var j=1;j<arr.length;j++){
var num1 = parseInt(arr[i].children[0].children[2].innerText);
var num2 = parseInt(arr[j].children[0].children[2].innerText);
if(isClick){//点击一次从大到小排列
if(num1>num2){
var tem = arr[i];
arr[i] = arr[j];
arr[j] = tem;
}
}else{//再点击一次从小到大排列
if(num1<num2){
var tem = arr[i];
arr[i] = arr[j];
arr[j] = tem;
}
}
}
}
isClick = !isClick;//点完之后取反
//将排序好的arr重新渲染出来 ***
for(var i=0;i<arr.length;i++){
table.appendChild(arr[i]);
}
})
}
//调用排序功能
order("#sort");
//全选 --- 全局定义
function allSel(el){
var allSelBtn = document.querySelector(el);
table.addEventListener("click",function(e){
if(e.target.classList.contains("allSel")){
var check = table.querySelectorAll("input[type=checkbox]");
//将类数组转换为数组-：
var arr = Array.prototype.slice.call(check);//用call改变this指向 ***
var res = arr.every(function(val,index){
return val.checked == true;
})
console.log(res);//true
for(var i=0;i<check.length;i++){
if(res){//当res的布尔值为true的时候才进入7
check[i].checked=false;
}else{
check[i].checked=true;
}
}
}
})
}
//调用全选功能
allSel(".allSel");
//删除选中 --- 全局定义
function delSelr(el){
let delSelBtn = document.querySelector(el);
delSelBtn.addEventListener("click",()=>{//es6语法
let checkAll = table.querySelectorAll("input[type=checkbox]");
for(let i=0;i<checkAll.length;i++){
if(checkAll[i].checked==true){
checkAll[i].parentNode.parentNode.parentNode.remove();
}
}
})
}
delSelr(".delSel");
网友评论