<div class="all">
<p>
11
</p>
</div>
<script type="text/javascript">
var div = document.querySelector(".all");
var p = document.querySelector("p");
console.log(p.parentElement);//获取到整个<div class="all"><p><span>11</span></div>
console.log(p.parentNode);//获取到整个<div class="all"><p><span>11</span></div>
console.log(div.children);//获取到子元素p标签
console.log(div.childNodes);//获取到p标签，但是包括节点，空格换行都是节点
console.log(p.innerText);//获取p标签里面的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删改查</title>
</head>
<body>
<style type="text/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;
}
</style>
<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" id="del" class="delb" value="删除选中" />
</div>
<table border="" cellpadding="" cellspacing="">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>操作<button class="all">全选</button></th>
</tr>
</table>
<div class="search">
<input type="search" />
<input type="button" name="" id="" value="搜索" />
</div>
</div>
<script>
var add = document.querySelector("#add");
var table = document.querySelector("table");
var userinfo = document.querySelectorAll("input[type=text]");
//添加增加功能
add.addEventListener("click", function() {
var tr = `
<tr>
<td>${userinfo[0].value}</td>
<td>${userinfo[1].value}</td>
<td>${userinfo[2].value}</td>
<td>
<button class="del">删除</button>
<button class="change" onclick="change(this)">修改</button>
<button class="confirmChange">确认修改</button>
<input type ="checkbox"/>
</td>
</tr>
`
table.innerHTML += tr;
for(let i = 0; i < userinfo.length; i++) {
userinfo[i].value = ""
}
// del();
// comfirmchange();
})
//删除方法1 不通过事件委托，需要在添加后调用才行
function del(){
let delbtn = document.querySelectorAll(".del");
for(let i=0;i<delbtn.length;i++){
delbtn[i].addEventListener("click",function(e){
console.log(e.target.className)
this.parentNode.parentNode.remove();//把自己删除
})
}
}
//删除方法2通过事件委托
table.addEventListener("click", function(el) {
if(el.target.className == "del") {
console.log(el.target);
console.log(el.target.parentNode) //拿到整个节点，包括尖括号
el.target.parentNode.parentNode.remove();
}
})
//修改功能 方式一
function change(obj){
var allTd = obj.parentNode.parentNode.children;
console.log(obj.parentNode);//拿到td
console.log(obj.parentNode.parentNode);//拿到tr
console.log(allTd);//拿到tr的所有字标签td
for(var i=0;i<allTd.length-1;i++){
allTd[i].contentEditable = true;
}
allTd[0].focus();//获取焦点
}
//修改功能方式二，通过事件委托修改功能
table.addEventListener("click", function(el){
// var allTd = obj.parentNode.parentNode.children;
if(el.target.className == "change"){
var allTd = el.target.parentNode.parentNode.children
for(var i = 0; i < allTd.length - 1; i++) {
allTd[i].contentEditable = true;
}
allTd[0].focus(); //获取焦点
}
})
//确认修改方法一
function comfirmchange(){
let comfirmBtn = document.querySelectorAll(".confirmChange");
for(let j =0;j<comfirmBtn.length;j++){
comfirmBtn[j].addEventListener("click",function(){
var allTd = this.parentNode.parentNode.children;//拿到所有td
for(let k=0;k<allTd.length;k++){
allTd[k].contentEditable = false;//让全部的td变成不可可编辑
}
})
}
}
//确认修改方法2事件委托
table.addEventListener("click", function(el){
if(el.target.className == "confirmChange"){
console.log(1)
var allTd = el.target.parentNode.parentNode.children;
for(var i = 0; i < allTd.length - 1; i++) {
allTd[i].contentEditable = false;
}
}
})
//根据名字搜索
function search(el){//封装
let search = document.querySelector(el),
searchcontent = search.querySelector("input[type = search]"),
searchbtn = search.querySelector("input[type=button]");
searchbtn.addEventListener('click',function(){
console.log(searchcontent.value);
let alltr = document.querySelectorAll("tbody");//拿到所有的行
console.log(alltr[1].children[0].children[0].innerText.trim())
for(let i =1;i<alltr.length;i++){//去掉第一个tr
if(searchcontent.value.trim() == alltr[i].children[0].children[0].innerText.trim()){
alltr[i].style.background = "yellow";
console.log(2)
}else{
alltr[i].style.background = "white";
}
}
})
}
search(".search");
//根据年龄排序
function order(el){
var isClick = true;//控制升降序
var orderBtn = document.querySelector(el);
orderBtn.addEventListener("click",function(){
var allTr = table.querySelectorAll("tbody");//拿到所有的行
// var allTr = table.querySelectorAll("tr");
console.log(allTr);
// var arr = [].concat(allTr);因为allTr获取到的是类数组，所以不能用这方法
var arr = [];
for(var i =0;i<allTr.length;i++){
arr.push(allTr[i]);
}
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;
console.log(arr);
for(var i=0;i<arr.length;i++){
table.appendChild(arr[i]);
}
})
}
order("#sort");
//全选
function allsel(el){
let allBtn = document.querySelector("el");
table.addEventListener("click",function(event){
if(event.target.classList.contains("all")){
var check = table.querySelectorAll("input[type=checkbox]");
//转为数组方法一
// var arr = [];
// for(var i=0;i<check.length;i++){
// arr.push(check[i])
// }
// 转为数组方法二
var arr =Array.prototype.slice.call(check);
let res = arr.every((val,index)=>{
return val.checked == true;
})
for(var i=0;i<check.length;i++){
if(res){
check[i].checked = false;
}else{
check[i].checked = true;
}
}
}
})
}
allsel(".all");
</script>
</body>
</html>
网友评论