JS 委托事件案例练习

最新推荐文章于 2024-08-22 14:32:34 发布

飘花见雪

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量52

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_59670965/article/details/130410253

版权

该代码示例展示了如何使用JavaScript创建一个包含100行10列的表格，实现隔行变色（奇数行灰色，偶数行白色）。同时，当鼠标悬停在行上时，行背景变为绿色，离开后恢复原色；鼠标悬停在单元格上时，单元格背景变为蓝色，移开后恢复无色。

摘要由CSDN通过智能技术生成

要求：

1.使用js生成表格(100行10列)
2.隔行变色 (奇数(灰) 偶数(白))
3.鼠标移入tr当中,tr背景色为绿色,移出以后还原
4.鼠标移入td当中,td背景色为蓝色,移出以后还原

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
		table{
			border:1px solid black;
      width: 600px;
		}
		td{
			border:1px solid black;
		}
	</style>
</head>
<body>
  <table>

  </table>
<script>
  let tab = document.querySelector("table");
  let tr;
  let td;
  for(var i=0; i<100; i++){
    tr=document.createElement("tr");
    tab.appendChild(tr);
    if(i%2==0){
      tr.style["backgroundColor"]="gray";
    }
    for(var j=0;j<10;j++){
		  td=document.createElement("td");
		  tr.appendChild(td);
		  td.innerHTML=i+"-"+j;
	  }
  }
</script>  
<script>
  let rows=document.querySelectorAll('tr');
  let pre;
	for(let i=0; i<rows.length;i++){
		rows[i].addEventListener('mouseover',function(e){
      if(e.target.parentNode.nodeName=="TR"){
        pre=e.target.parentNode.style.backgroundColor;
        e.target.parentNode.style.backgroundColor="green";
      }
		});
		rows[i].addEventListener('mouseout',function(e){
      if(e.target.parentNode.nodeName=="TR"){
        e.target.parentNode.style.backgroundColor=pre;
      }
		});
		let columns=rows[i].querySelectorAll('td');
		for(let j=0;j<columns.length;j++) {
			columns[j].addEventListener('mouseover',function(e){
      if(e.target.nodeName=="TD"){
        e.target.style.backgroundColor="blue";
      }
			});
			columns[j].addEventListener('mouseout',function(e){
      if(e.target.nodeName=="TD"){
        e.target.style.backgroundColor="";
      }
		  });
		}
	}
</script>
</body>
</html>