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部署前端頁面與加速靜態資源
- • 算法總結-滑動窗口
-
每一个你不满意的现在，都有一个你没有努力的曾经。