要求:
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>