js特效-表格隔行换色

问题描述:

我们用js特效可以轻松实现点击表格的某一个td,实现整列变色的效果

主要思想:

排他思想:先清除所有的格式,再单独为某元素设置格式

实现过程:

构建HTML骨架
CSS实现
js实现

HTML骨架:

<h5>
		隔行换色
	</h5>
	<table class="tb">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

CSS实现

	<style>
		*{
		//清除所有元素的原始格式
			padding: 0;
			margin: 0;
		}
		table {
			width: 500px;	//设置表的宽度
			height: 200px;	//设置表的高度
			border: 1px solid red ;	//设置表的边框
			cellspacing: 0;	//单元格之间的间隙设置为0
		}
		td{
			border: 1px solid blue ;	//设置td的边框
		}
	</style>

js实现:

<script>
	Object.prototype.indexof1=function(){
	//在Object函数的原型上面添加indexof1方法,此方法会找到调用者在调用者父元素的子元素们中的位置,即调用者的位置(相对于其兄弟元素来说)
		var arr=this.parentElement.children
		//获取调用者的父元素的所有子元素
		for(let i=0;i<arr.length;i++){
		//遍历子元素们,比较并得到调用者的位置
		if( arr[i]===this){
			return i
			//找到之后返回所在位置下标
		}
	}
}
</script>

<script>
	var tb=document.querySelector(".tb")
	//获取class为tb的表
	var trs=document.querySelectorAll("tr")
	//获取页面所有tr
	var tds=document.querySelectorAll("td")
	//获取页面所有的td
	for(let i=0;i<tds.length;i++){
	//for循环为所有的td绑定点击事件
		tds[i].onclick=function(){
			tds.forEach((el)=>{
			//排他思想,点击td后先将所有的td的背景颜色设置为white(遍历所有的td,设置背景颜色)
				el.style.backgroundColor="white"
			})
			var x=this.indexof1()
			//利用上一个Script脚本添加的indexof1方法,找到被点击的td相对于其兄弟的位置x
			for(let i=0;i<trs.length;i++){
			//为所有的行的子元素x位置的td设置背景颜色
				trs[i].children[x].style.backgroundColor="pink"
			}
		}
	}