Interlaced color change of table

  First, we get such a table

Our goal is to randomly point a grid , Then this column of grids changes color , When you click on another grid, this column of grids changes back to the original color , Then change the color of the column of cells you click

To achieve this goal , Two things we need to learn

The first is the function we introduced in the previous article , If you don't understand, you can read the previous article .

It is used to find the number of child elements of the parent element

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

The second point is , Exclusive thoughts ：

  About exclusivity , My understanding is to exclude everyone first , Finally, add the desired effect to yourself .

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 yes tr Elements 
						el.children[x].style.backgroundColor="red"
					})
				}
			}

First, we get tr and td label

Use for Give all the loops td Are tied to click events

Click in the event function

1. adopt tds（ The tag selector filters out an array of classes ） Use the loop to put all td Change the background color of the label to white

2. Through the function we designed, the cell returned by clicking is the number of child elements of the parent element , return i come out

3. Through this i Go through each one tr The number in the label i individual td Elements change the background color .

This whole idea is exclusive .

Static will not be described

Let's talk about one more How does each line appear

				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"
						}
					
				}
			})()

No need if you can td The click event is bound in

Directly in tr Binding events in .

You don't need to get it through the set function i The subscript .

Direct manipulation tr Just a label