javascript表格隔行變色加滑鼠移入移出及點選效果的方法_javascript技巧
本文實例講述了javascript表格隔行變色加滑鼠移入移出及點擊效果的方法。分享給大家供大家參考。具體分析如下：
表格隔行變色，也是一個提高使用者體驗的js效果。
效果實現：
表格奇偶行的顏色不一樣。這樣可以防止使用者看資料時串列。
滑鼠移入某行時變顏色，移出再變回來。這樣可以讓使用者清楚的知道自己正在看哪一行。
表格點選變色。方便使用者選取自己想保留的項目。
說明：
i%2 每個數和2取模的值，只有0和1兩種，這樣就可以實現隔行變色的效果
tables_li[i].onoff = 1; 為了實現點擊變色，滑鼠移入移出時，顏色不被覆蓋。
上碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<style>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var tables = document.getElementById("tables");
var tables_li = tables.getElementsByTagName("tr");
var i=0;
var len = tables_li.length;
for(i=0; i<len; i++){
tables_li[i].onoff = 1;
tables_li[i].index = i;
tables_li[i].style.backgroundColor = i%2?"#ace":"";
tables_li[i].onmouseover = function(){
if(this.onoff == 1){
this.style.backgroundColor = "#06c";
}
}
tables_li[i].onmouseout = function(){
if(this.onoff == 1){
this.style.backgroundColor = this.index%2?"#ace":"";
}
}
tables_li[i].onclick = function(){
if(this.onoff == 1){
this.onoff = 0;
this.style.backgroundColor = "#069";
}else{
this.onoff = 1;
this.style.backgroundColor = this.index%2?"#ace":"";
}
}
}
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
<tr>
<td>1</td>
<td>内容内容</td>
</tr>
<tr>
<td>2</td>
<td>内容内容</td>
</tr>
<tr>
<td>3</td>
<td>内容内容</td>
</tr>
<tr>
<td>4</td>
<td>内容内容</td>
</tr>
<tr>
<td>5</td>
<td>内容内容</td>
</tr>
<tr>
<td>6</td>
<td>内容内容</td>
</tr>
<tr>
<td>7</td>
<td>内容内容</td>
</tr>
<tr>
<td>8</td>
<td>内容内容</td>
</tr>
<tr>
<td>9</td>
<td>内容内容</td>
</tr>
<tr>
<td>10</td>
<td>内容内容</td>
</tr>
</table>
</body>
</html>希望本文所述對大家的javascript程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統中關閉滑鼠移動工作列圖示時顯示的縮圖功能。這項功能在預設情況下是開啟的，當使用者將滑鼠指標懸停在工作列上的應用程式圖示上時，會顯示該應用程式的目前視窗縮圖。然而，有些用戶可能覺得這個功能不太實用或會幹擾到他們的使用體驗，因此想要關閉它。工作列縮圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將滑鼠懸停在該區域的頻率，您可能無意中關閉了重要視窗幾次。另一個缺點是它使用更多的系統資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何停用它。不過
PPT表格中插入的圖片調整格式的操作步驟
Mar 26, 2024 pm 04:16 PM
1.新建一個PPT文件，命名為【PPT技巧】，作為範例。 2、雙擊【PPT技巧】，開啟PPT檔。 3、插入兩行兩列的表格，作為範例。 4.在表格的邊框上雙擊，上方工具列出現【設計】的選項。 5.點選【底紋】的選項，點選【圖】。 6.點選【圖片】，彈出以圖片為背景的填滿選項對話框。 7.在目錄中找到要插入的托，點選確定即可插入圖片。 8.在表格框上右鍵，彈出設定的對話框。 9.點選【設定儲存格格式】，勾選【將圖片平鋪為底紋】。 10.設定【居中】【鏡像】等自己需要的功能，點選確定即可。注意：預設為圖片填充在表格
雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架，套裝價 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢耿鬼款無線滑鼠、滑鼠墊。其單品定價分別為1,299元及299元，包含兩款產品的套裝價則為1,549元。這並非雷蛇首次推出耿鬼聯名的周邊產品，2023年雷蛇就推出過耿鬼款的八岐大蛇V2遊戲滑鼠。這次推出兩款新品整體均採用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三隻寶可夢和精靈球的線條輪廓，中間則為耿鬼這一經典幽靈屬性寶可夢的彩色大圖。本站發現，雷蛇|寶可夢耿鬼款無線滑鼠是基於先前發表的毒蝰V3專業版打造。其整體重量為55g，搭載雷蛇第二代FOC
wps數值如何設定依條件自動變色_wps表格數值設定依條件自動變色的步驟
Mar 27, 2024 pm 07:30 PM
1.開啟工作表，找到【開始】-【條件格式】按鈕。 2、點選列選擇，選取將新增條件格式的列。 3.點選【條件格式】按鈕，彈出選項選單國。 4.選擇【突出顯示條件規則】-【介於】。 5、填寫規則：20，24，深填色深綠色文字。 6.確定後，所選列中資料依設定對對應數字文字、單元框加色處理。 7.對於沒有衝突的條件規則，可以重複添加，但對於衝突規則wps則會以最後添加的規則代替先前建立的條件規則。 8.重複新增【介於】規則20-24和【小於】20後的單元列。 9.如需改變規則，剛可以清除規則後重新設定規則。
惠普推出 Professor 1 三模輕音滑鼠：4000DPI、藍影 RAW3220，首發價 99 元
Apr 01, 2024 am 09:11 AM
本站3月31日消息，惠普近日在京東上架了一款Professor1三模藍牙滑鼠，可選用黑白奶茶色，首發價99元，需支付10元訂金。據介紹，這款滑鼠重量為106克，採用人體工學設計，尺寸為127.02x79.59x51.15mm，可選七檔4000DPI，搭載藍影RAW3220傳感器，使用650毫安時電池，號稱一次充電續航可以使用2個月。本站附滑鼠參數資訊如下：
關於銷售預測如何製作表格
Mar 20, 2024 pm 03:06 PM
能夠熟練的製作表格不僅是會計、人事以及財務的必備技能，對於許多銷售人員來說，學會製作表格也是很重要的。因為與銷售量有關的數據都是很多且很複雜的，而且不是簡單的記在文件當中，就可以說明問題的。為了能讓更多的銷售人員熟練運用Excel來製作表格，小編接下來要介紹的就是有關於銷量預測的表格製作問題，有需要的朋友不要錯過哦！ 1，開啟【銷售預測及目標制定】，xlsm，來分析每個表格所存放的資料。 2，新建【空白工作表】，選擇【儲存格】，輸入【標籤資訊】。向下【拖曳】，【填充】月份。輸入【其它】數據，點選【
VGN 聯名《艾爾登法環》鍵鼠系列產品上架：菈妮 / 褪色者定制主題，首發 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN於8月6日推出了聯名《艾爾登法環》鍵鼠系列產品，包含鍵盤、滑鼠和滑鼠墊，採用菈妮/褪色者客製化主題設計，目前系列產品已上架京東，售價99元起。本站附聯名新品資訊如下：VGN丨艾爾登法環S99PRO鍵盤此鍵盤採用純鋁合金外殼，輔以五層消音結構，使用GASKET板簧結構，擁有單鍵開槽PCB、原廠高度PBT材質鍵帽、鋁合金個人化背板；支援三模連接和SMARTSPEEDX低延遲技術；接入VHUB，可一站式管理多款設備，首發549元。 VGN丨艾爾登法環F1PROMAX無線滑鼠該滑鼠
雷蛇滑鼠驅動在哪個資料夾
Mar 02, 2024 pm 01:28 PM
很多使用者不知道自己雷蛇驅動安裝的檔案去了哪裡，這些驅動檔案一般都是安裝在了系統盤，也就是電腦的C盤，具體位置在programfiles下的RAZE資料夾。雷蛇滑鼠驅動在哪個資料夾答：在系統C碟的programfiles下的RAZE資料夾。一般驅動都會安裝在C盤，按照位置去找就可以了。雷蛇滑鼠驅動安裝方法介紹1.下載好官網的檔案以後雙擊運行自己下載的EXE檔。 2、等待軟體載入。 3.在這裡可以選擇你要安裝的哪個驅動程式。 4.選擇好以後點選右下角的「安裝」就可以了。
