点击事件 编写法则

点击事件案例:

<table align="center" border="1" width="600px" height="100px" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
Object.prototype.indexof1=function(){
            var arr=this.parentElement.children 
            for(var i in arr){
                if(arr[i]==this){
                    return i
                }
            }
        }

        // 对一列变色  tr[1]td[1]tr[2]td[2]tr[3]td[3] 同时变色  
        var trs=document.querySelectorAll("tr")           
        var tds=document.querySelectorAll("td")
        for(var i=0;i<tds.length;i++){                    
            tds[i].onclick=function(){                   
                tds.forEach((el)=>{                       
                    el.style.backgroundColor="#fff"       
                })
                let x=this.indexof1()                     
                trs.forEach((el)=>{                      
                    el.children[x].style.backgroundColor="red"
                })
            }
        }

运行图像

点击后一列变色

 代码过程总结:

1.获取两个tr td

2.遍历tds合集

3.对td点击事件 因为列同时变 而列上都是td

4.排他  forEach输入所有td赋予白色

5.确定点击的td在tr的位置 因为遍历的tds有很多 无法确定所在tr这里引入工具函数

6.用forEach遍历进所有tr 每个tr的第i个也就是被点击的那个变色

编写点击事件时 可以列出所有变化要素

1.点击事件只针对被点击的那个元素做改变 比如 在el的点击事件函数里  可以直接el.style.backgroundColor="skyblue"  改变el

2. 无关被点击el的元素需要其他操作