31.鼠标悬浮时动态改变当前行的背景色 各行换色
1.效果css
1.1 各行换色html
1.2 JS版本鼠标移动上去变色移出还原jquery
1.23 jQuery版本鼠标悬浮背景颜色this
2.代码spa
2.1各行换色htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各行换色</title>
<script>
window.onload=function(){
//1.获取表格对象
var tabele = document.getElementById("tab");
//2.获取表格tbody里面的数据条数
var len = tabele.tBodies[0].rows.length;
//3.循环给基数和偶数行设置不一样的背景颜色
for(var i=0;i<len;i++){
if(i%2==1){//奇数行
var JiShuRows = tabele.tBodies[0].rows[i];
JiShuRows.style.backgroundColor="green";//注意style 首字母小写的
}else{
var OushuRows = tabele.tBodies[0].rows[i];
OushuRows.style.backgroundColor="red";//注意style 首字母小写的
}
}
}
</script>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>家庭地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>15</td>
<td>陕西西安</td>
</tr>
<tr>
<td>李四</td>
<td>26</td>
<td>北京海淀区</td>
</tr>
<tr>
<td>小五</td>
<td>24</td>
<td>天津大港</td>
</tr>
<tr>
<td>小六</td>
<td>26</td>
<td>上海浦东</td>
</tr>
<tr>
<td>小七</td>
<td>23</td>
<td>广东广州</td>
</tr>
<tr>
<td>张萌</td>
<td>12</td>
<td>重庆</td>
</tr>
</tbody>
</table>
</body>
</html>
对象
2.2 JS版本鼠标移动上去变色移出还原seo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各行换色</title>
<script>
window.onload=function(){
var alltr = document.getElementsByTagName("tr");
for(var i=1;i<alltr.length;i++){
if(i%2 ==0){
alltr[i].style.backgroundColor="red";
}else{
alltr[i].style.backgroundColor="gainsboro";
}
alltr[i].onmouseover=function(){
this.setAttribute("bgc",this.style.backgroundColor);
this.style.backgroundColor="greenyellow";
}
alltr[i].onmouseout =function(){
this.style.backgroundColor=this.getAttribute("bgc")
}
}
}
</script>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>家庭地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>15</td>
<td>陕西西安</td>
</tr>
<tr>
<td>李四</td>
<td>26</td>
<td>北京海淀区</td>
</tr>
<tr>
<td>小五</td>
<td>24</td>
<td>天津大港</td>
</tr>
<tr>
<td>小六</td>
<td>26</td>
<td>上海浦东</td>
</tr>
<tr>
<td>小七</td>
<td>23</td>
<td>广东广州</td>
</tr>
<tr>
<td>张萌</td>
<td>12</td>
<td>重庆</td>
</tr>
</tbody>
</table>
</body>
</html>事件
2.3 鼠标悬浮改变背景颜色ip
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>各行换色</title> <script src="../js/jquery-1.8.3.js"></script> <!--注意引入jQuery--> <script> window.onmouseover=function(){//鼠标悬浮事件触发 //鼠标悬浮时动态改变当前行的背景色 //一、获得tr对象，并绑定鼠标悬浮事件 $("tbody tr").hover( function(){ $(this).css("background-color","red");//给当前tr添背景色 }, function(){ $(this).css("background-color","");//给当前tr添背景色,给“”值则使用原来的值 } ); } </script> </head> <body> <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab"> <thead> <tr> <th><input type="checkbox"></th> <th>姓名</th> <th>年龄</th> <th>家庭地址</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>张三</td> <td>15</td> <td>陕西西安</td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>26</td> <td>北京海淀区</td> </tr> <tr> <td><input type="checkbox"></td> <td>小五</td> <td>24</td> <td>天津大港</td> </tr> <tr> <td><input type="checkbox"></td> <td>小六</td> <td>26</td> <td>上海浦东</td> </tr> <tr> <td><input type="checkbox"></td> <td>小七</td> <td>23</td> <td>广东广州</td> </tr> <tr> <td><input type="checkbox"></td> <td>张萌</td> <td>12</td> <td>重庆</td> </tr> </tbody> </table> </body> </html>
- 1. 帆软报表-鼠标悬停改变背景色
- 2. 鼠标悬停整行变色
- 3. GridView 鼠标悬浮、移开变色
- 4. element-ui 中 table 鼠标悬停时背景颜色修改
- 5. 动态添加的表格行在鼠标通过时候改变行的背景颜色
- 6. 根据单元格值改变当前行背景色
- 7. 最简单的背景颜色、背景图颜色鼠标滑过变换
- 8. jsp表格中实现鼠标放到某一行，使这行背景变色，移开时背景色还原。
- 9. 修改Ubuntu下Eclipse鼠标悬停提示背景颜色
- 10. 鼠标停留在GridView某一行时，行的颜色改变
- 更多相关文章...
- • ionic 背景层 - ionic 教程
- • Eclipse 悬浮提示 - Eclipse 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 算法总结-滑动窗口
-
每一个你不满意的现在，都有一个你没有努力的曾经。