表格的隔行变色

 首先我们获得这样一个表格

我们的目的就是随机点一个格子，然后这一列格子变色，当点击另外的格子的时候这一列格子变回原来颜色，然后把点击的单元格那一列单元格变色

要达到这个目的，我们需要学习的两个东西

第一个就是上一篇我们介绍的函数，如果不懂得可以看上篇。

用来寻找子元素是父元素的第几个子元素

Object.prototype.indexof1=function(){
				var arr=this.parentElement.children
				for(let i=0;i<arr.length;i++){
					if(arr[i]===this){
						return i
					}
				}				 
			}

第二点就是，排他思想：

 关于排他思想，我的理解就是先排除掉所有人，最后再给自己加想要的效果。

var tb=document.querySelector("#tb")
			var trs=document.querySelectorAll("tr")
			var tds=document.querySelectorAll("td")
			for(let i=0;i<tds.length;i++){
				tds[i].onclick=function(){
					// console.log(this,tds[i])
					tds.forEach((el)=>{
						// console.log(el,11)
						el.style.backgroundColor="white"
					})
					let x=tds[i].indexof1()
					trs.forEach((el)=>{
						//el是tr元素
						el.children[x].style.backgroundColor="red"
					})
				}
			}

首先我们通过类选择器获取到tr和td标签

使用for循环给所有的td都绑上点击事件

点击事件函数里面

1.通过tds（标签选择器筛选出来的是一个类数组）使用循环把所有的td标签背景色改为白色

2.通过我们设计的函数返回点击的单元格是父元素的第几个子元素，返回i出来

3.通过这个i去遍历每个tr标签里面的第i个td元素把他背景颜色改变。

这一整个思想就是排他思想。

静态的就不叙述了

我们再来说一个 每一行怎么显示

				var trs=document.querySelectorAll("#tb3 tr")
				for(let i=0;i<trs.length;i++){					
						trs[i].onclick=function(){
							trs.forEach((el)=>{
								el.style.backgroundColor="white"
							})							
							// console.log(i,trs[i],11111)
							trs[i].style.backgroundColor="gray"
						}
					
				}
			})()

行就不用仔td中绑定点击事件了

直接在tr中绑定事件。

也不用通过设置的函数去获取i的下标。

直接操作tr标签就行