创建如图表格：
let tr = document.querySelectorAll("tr")
//跨行显色
//获取所有的行
//遍历所有行，偶数行显色
for (let i = 0; i < tr.length; i += 2) {
tr[i].style.backgroundColor = "pink";
}
//点击哪一行哪一行显色
//遍历所有行设置点击事件
//排他设计
for (let i = 0; i < tr.length; i++) {//遍历所有行设置点击事件
tr[i].onclick = function () {//点击哪一行哪一行显色
for (let j = 0; j < tr.length; j++) {//排他设计
tr[j].style.backgroundColor = "white";
}
this.style.backgroundColor = "pink";// this指向i
}
}
//排他设置思想：先排除他人（包括自己），再设置自己
//先获取每个按钮
//每个按钮设置上点击事件
//先排除他人
//最后设置自己
let but = document.querySelectorAll("button");//先获取每个按钮
for (let i = 0; i < but.length; i++) {
but[i].onclick = function () {//每个按钮设置上点击事件
// console.log(this);
// console.log(i);
for (let j = 0; j < but.length; j++) {//先排除他人
but[j].style.backgroundColor = "";
}
this.style.backgroundColor = "red";//最后设置自己
}
}
let tr = document.querySelectorAll("tr")//取出所有行
//跨列显色
for (let i = 0; i < tr.length; i++) {
let arrSon = tr[i].children;//在每行分别拿出子元素
for (let j = 0; j < arrSon.length; j += 2) {//从0开始
arrSon[j].style.backgroundColor = "pink";//对应子元素的第偶数个显色
}
}
//点击哪列哪列显色
let td = document.querySelectorAll("td");//取出所有列
for (let i = 0; i < td.length; i++) {
td[i].onclick = function () {//给每列设置点击事件
let index = this.index();//封装：获取自己是父元素的第几个子元素节点//this指向i
// console.log(index);//获取当前这一单元格是在这行是第几个元素
for (let j = 0; j < td.length; j++) {//排他
td[j].style.backgroundColor = "white"
}
for (let k = 0; k < tr.length; k++) {//每行对应的每列
tr[k].children[index].style.backgroundColor = "pink"
//每行对应的每个子元素
}
}
}
// 封装一个方法：获取自己是父元素的第几个子元素节点
// Object.prototype.index = function () {//封装在原型链上
// let arrSon = this.parentElement.children;
// for (let i = 0; i < arrSon.length; i++) {
// if (this == arrSon[i]) {
// return i;
// }
// }
// }