JavaScript基础应用-鼠标悬浮/离开表格格式变化
效果演示
对于网页中的一个表格，我们希望实现以下效果：（鼠标悬浮时该单元格所在行的背景颜色变为黄色，字体颜色变为红色，鼠标离开时，恢复原来的颜色）
这里就要使用到JavaScript的函数
代码实现
HTML代码
<html>
<head>
<title>
sample
</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="imgs/css/fruitdemo02.css">
<script type="text/javascript" src="js/demo07.js"></script>
</head>
<body>
<div id="div_containner">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr>
<th class="w20"><i>名称</i></th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>菠萝</td>
<td>3</td>
<td>20</td>
<td>100</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td>香蕉</td>
<td>25</td>
<td>20</td>
<td>200</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<td class="w20">总计</td>
<td colspan="4" align="center">181</td>
</tr>
</table>
</div>
</div>
</body>
</html>css代码
<html>
<head>
<title>
CSS-javascriptt
</title>
<meta charset="UTF-8">
<style type="text/css">
/* 被style标签包围的范围时CSS环境，可以写CSS代码*/
p{
color: coral;
}
<!--ID样式-->
#p4{
background-color: pink;
font-size: 25px;
font-style: italic;
font-weight: bolder;
font-family:"华文行楷";
}
<!--组合样式-->
div p{
color: rebeccapurple;
}
</style>
<link rel="stylesheet" href="css/demo02.css">
</head>
<body>
<h1><span style="color: rebeccapurple">CSS初识</span></h1>
<p>段落1</p>
<p>段落2</p>
<p class="f20">段落3</p>
<p>
</p>
</body>
</html>
<!--
1.CSS分类：标签样式表、类样式表、ID样式表
2.CSS从位置上的分类：
-->JavaScript代码
<html>
<head>
<title>
CSS-javascriptt
</title>
<meta charset="UTF-8">
<style type="text/css">
/* 被style标签包围的范围时CSS环境，可以写CSS代码*/
p{
color: coral;
}
<!--ID样式-->
#p4{
background-color: pink;
font-size: 25px;
font-style: italic;
font-weight: bolder;
font-family:"华文行楷";
}
<!--组合样式-->
div p{
color: rebeccapurple;
}
</style>
<link rel="stylesheet" href="css/demo02.css">
</head>
<body>
<h1><span style="color: rebeccapurple">CSS初识</span></h1>
<p>段落1</p>
<p>段落2</p>
<p class="f20">段落3</p>
<p>
</p>
</body>
</html>
<!--
1.CSS分类：标签样式表、类样式表、ID样式表
2.CSS从位置上的分类：
-->文件目录结构
HTML代码中不要出现JS代码，因此需要改写以上代码
改写后的代码如下：
改写后HTML代码
<html>
<head>
<title>
sample
</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="imgs/css/fruitdemo02.css">
<script type="text/javascript" src="js/demo07.js"></script>
</head>
<body>
<div id="div_containner">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr>
<th class="w20"><i>名称</i></th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>3</td>
<td>20</td>
<td>100</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr>
<td>香蕉</td>
<td>25</td>
<td>20</td>
<td>200</td>
<td align="center"><img src="imgs/delete.png" class="delImg"/></td>
</tr>
<tr>
<td class="w20">总计</td>
<td colspan="4" align="center">181</td>
</tr>
</table>
</div>
</div>
</body>
</html>改写后JS代码
//当前窗口
window.onload=function (){
//当页面加载完成，绑定各种事件
//获取对ID标签属性为指定值的第一个对象的引用
var fruitTb1 = document.getElementById(`tb1_fruit`);
//获取来自于table对象的tr对象的集合
var rows = fruitTb1.rows;
for (var i = 0; i < rows.length; i++) {
var tr = rows[i];
//1.绑定鼠标悬浮设置背景颜色事件,离开后背景颜色恢复的事件
tr.onmouseover = showBGColor;
tr.onmouseout = clearBGColor;
//2.获取tr这一行的所有单元格
var cells = tr.cells;
var priceID = cells[i];
//3.绑定鼠标悬浮在单价单元格变手势的事件
priceID.onmouseover = showHand;
}
}
function showHand() {
if(event && event.srcElement && event.srcElement.tagName === "TD"){
var td = event.srcElement;
td.style.cursor = "hand";
}
}
//当鼠标悬浮时显示背景颜色
function showBGColor() {
//event:表示当前发生的事件;
//srcElement:事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName);
if(event && event.srcElement && event.srcElement.tagName === "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor = "yellow"
//获取tr中的所有单元格
var tds = tr.cells;
for (var i = 0; i < tds.length; i++) {
tds[i].style.color="red"
}
}
}
function clearBGColor() {
if(event && event.srcElement && event.srcElement.tagName === "TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor = "transparent";
var tds = tr.cells;
for(var i = 0;i < tds.length;i++){
tds[i].style.color = "darkgray";
}
}
}
