一.业务代码说明:
制作一张商品信息表格,要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化,当鼠标移开其背景颜色就会恢复为白色。
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change table row backGroundColor</title>
<style>
tr{
text-align: center}
caption{
margin: 25px}
.tr1{
background-color: bisque}
.tr2{
background-color: white}
</style>
<script>
let changeTrBGColor = function () {
let trs = document.getElementsByTagName("tr");
for(let i=1;i<trs.length;i++){
trs[i].onmouseover = function(){
trs[i].className = "tr1";
}
trs[i].onmouseout = function(){
trs[i].className = "tr2";
}
}
}
window.onload = function () {
changeTrBGColor();
}
</script>
</head>
<body>
<table id="table1" border="2px" align="center" cellspacing="0px"
width="40%" cellpadding="10px">
<caption>商品信息表</caption>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr>
<td>1001</td>
<td>洗衣机</td>
<td>2800</td