JavaScript實現(xiàn)鼠標經(jīng)過表格某行時此行變色
更新時間：2020年11月20日 15:22:04 作者：我是Dreamer啊
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標經(jīng)過表格某行時此行變色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js鼠標經(jīng)過表格某行時此行變色的具體代碼，供大家參考，具體內(nèi)容如下
表格表頭為藍色，表主體為白色，當鼠標放到表的非表頭行時，這一行顏色變?yōu)辄S色，鼠標離開時黃色消失。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠標經(jīng)過表格變色</title>
<style>
table {
margin: 200px auto;
font-size: 12px;
border-collapse: collapse;
width: 500px;
height: 50px;
}
table thead tr {
font-size: 14px;
background-color: skyblue;
}
td {
border: 1px solid black;
}
.bgc{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<thead>
<td>表頭1</td>
<td>表頭2</td>
<td>表頭3</td>
</thead>
<tbody>
<tr>
<td>表格一行一列</td>
<td>表格一行二列</td>
<td>表格一行三列</td>
</tr>
<tr>
<td>表格二行一列</td>
<td>表格二行二列</td>
<td>表格二行三列</td>
</tr>
<tr>
<td>表格三行一列</td>
<td>表格三行二列</td>
<td>表格三行三列</td>
</tr>
<tr>
<td>表格四行一列</td>
<td>表格四行二列</td>
<td>表格四行三列</td>
</tr>
<tr>
<td>表格五行一列</td>
<td>表格五行二列</td>
<td>表格五行三列</td>
</tr>
</tbody>
</table>
<script>
var tr =document.querySelectorAll('tr');
for(var i = 0;i < tr.length ;i++){
tr[i].onmouseover = function(){
this.className = 'bgc';
}
tr[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JS要實現(xiàn)下載功能，一般都是這么幾個過程：生成下載的URL，動態(tài)創(chuàng)建一個A標簽，并將其href指向生成的URL，然后觸發(fā)A標簽的單擊事件，這樣就會彈出下載對話框，從而實現(xiàn)了一個下載的功能2017-07-07
js二級地域選擇的實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了原生JavaScript實現(xiàn)瀑布流布局的相關(guān)資料,實現(xiàn)鼠標下拉圖片自動加載效果，和百度圖片效果類似，需要的朋友可以參考下2016-01-01
DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)，感興趣的朋友一起看看吧2017-08-08
mongodb的數(shù)據(jù)存儲格式是一種由于MongoDB的文檔結(jié)構(gòu)為BJSON格式（BJSON全稱：Binary JSON），而BJSON格式本身就支持保存二進制格式的數(shù)據(jù)，因此可以把文件的二進制格式的數(shù)據(jù)直接保存到MongoDB的文檔結(jié)構(gòu)中2012-11-11
這篇文章主要介紹了js封裝可使用的構(gòu)造函數(shù)繼承用法,實例分析了使用屬性拷貝來實現(xiàn)拷貝繼承的技巧,需要的朋友可以參考下2015-01-01
我們在項目經(jīng)常遇到獲取本機IP地址的需求,下面這篇文章主要給大家介紹了關(guān)于JS獲取本機IP地址的2種方法,文中通過示例代碼介紹的非常詳細,本文適合新手,需要的朋友可以參考下2022-09-09
JavaScript數(shù)組中reduce方法的應用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個值，，所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應用，需要的可以參考一下2023-07-07
Bootstrap每天必學之面板，面板（Panels）是Bootstrap框架新增的一個組件，其主要作用就是用來處理一些其他組件無法完成的功能，對面板感興趣的小伙伴們可以參考一下2015-11-11
學習Typescript通常是一個重新發(fā)現(xiàn)的過程。這篇文章為大家整理了十個你必須要會的TypeScript技巧，希望對大家學習TypeScript有所幫助2023-06-06