javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

阿新 • • 發佈：2018-11-17

Date：2018/11/17

效果如圖所示，滑鼠進入表格變色，游標離開恢復

在這裡插入圖片描述
原始碼：

<!-- 1、滑鼠進入/出 ：onmouseover / onmouseout -->
<!-- 2、兩個事件繫結一個函式chColor() -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行換色</title>

	</head>
	<script>
		function chColor 
(id,info){
			if(info == "over"){
				document.getElementById(id).style.backgroundColor = "red";
			}else if(info == "out"){
				document.getElementById(id).style.backgroundColor = "white";
			}
		}
		
	</script>
	
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" 
>
			<thead>
				<tr>
					<th>編號</th>
					<th>姓名</th>
					<th>年齡</th>
				</tr>
			</thead>
			
			<tbody>
				<tr id="tr1" onmouseover="chColor('tr1','over')"  onmouseout="chColor('tr1','out')" >
					<td>1</td>
					< 
td>張三</td>
					<td>22</td>
				</tr>
				<tr tr id="tr2" onmouseover="chColor('tr2','over')"  onmouseout="chColor('tr2','out')">
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr>
					<td>4</td>
					<td>趙六</td>
					<td>29</td>
				</tr>
				<tr>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

Date：2018/11/17 效果如圖所示，滑鼠進入表格變色，游標離開恢復原始碼：   <!D

javaEE (四）javaweb_JavaScript (4) 表格變色：隔行變色

效果如圖所示，隔行變色原始碼： <!-- 新標籤： <thead> <tr> <th> </th> </tr> </thead> <tbody> <

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原：原始碼：  <!-- 2、獲取複選框：var checkAllEle = document.getE

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

Date：2018/11/17 效果圖，籍貫選湖北，然後後面就會出現湖北的地級市: 原始碼： <!-- 1、事件(onchange)； 2、建立二維陣列儲存省份和城市；（陣列長度 = 最大角標+1） 3、獲取使用者選擇的省份(使用方法傳參的方式：th

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告：原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。原始碼：  <!-

Device Tree（四）linux-4.19.10 板級移植

1、修改Makefile ARCH ?= arm CROSS_COMPILE ?= arm-linux-gnueabihf- 如果發現：/tmp/cc8nFJm8.s:549: Error: garbage following instruction -- `d

（四）Solr6.4.1配置中文分詞器IK Analyzer詳解

Solr6.4.1配置中文分詞器IK Analyzer詳解 2.把IKAnalyzer.cfg.xml，mydict.dic，stopword.dic這三個檔案複製放入tomcat/solr專案web-info的classes下 3.把ik-analyz

js表格中的DOM操作之隔行變色，滑鼠進入當前行高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

MFC筆記（四）——多執行緒程式設計3：用_beginthreadex()來代替使用CreateThread()

CreateThread()函式是Windows提供的API介面，在C/C++語言另有一個建立執行緒的函式_beginthreadex()，在很多書上（包括《Windows核心程式設計》）提到過儘量使用_begin

（四）4 請求-響應流程

python現在我們開發了一個簡單的Flask小程序，知道用戶在瀏覽器中輸入一個URL對應到哪個視圖函數進行處理。那麽問題來了，怎麽去進行處理一些比較復雜的業務邏輯呢？一、程序上下文 1、整個app範圍,也就是說是全局的（程序級別）的上下文怎麽理解這個上下文呢？就是在所有的這個請求當中，我們共享的是同一

（十四）Hibernate中的多表操作（4）：單向一對一

odin utf-8 lds () clas string 方式 rdb style 案例一：註解方式實現一對一 UserBean.java package bean; import java.io.Serializable; import javax.pers

搜索引擎ElasticSearch系列（四）： ElasticSearch2.4.4 sql插件安裝

china code als 插件技術分享 -s fun nlp 4.0 一：ElasticSearch sql插件簡介　　With this plugin you can query elasticsearch using familiar SQL syntax.

Unreal Engine 4（虛幻UE4）GameplayAbilities 插件入門教程（四）技能屏蔽和簡單的Buff等

網絡 important any time sim sed exe triggers 進入本節內容繼續上一節教程的內容（如果沒有看過前面的教程，請前往學習），不會講太難的新東西，而是繼續探究技能標簽（Abiilty Tags）的內容。先來一道開胃菜。第1.1步：將

JXLS 2.4.0系列教程（四）——多sheet是怎麽做到的

while director write 教程 == 模板 phy sheet ack 註：本文代碼在第一篇文章基礎上修改而成，請務必先閱讀第一篇文章。 http://www.cnblogs.com/foxlee1024/p/7616987.html 本文也不會過多的講解模

JXLS 2.4.0系列教程（四）——拾遺如何做頁面小計

進行 line http spa shee shel nes 默認閱讀　　註：閱讀本文前，請先閱讀第四篇文章。　　http://www.cnblogs.com/foxlee1024/p/7619845.html 　　前面寫了第四篇教程，發現有些東西忘了講了，這裏補

HTML筆記（四） - 圖像、表格、列表、區塊

sem inline 註意樣式而不是 style height nbsp 另一個一、圖像 1、圖像標簽（<img>）和源屬性（<Src>）在HTML中，圖像由<img>標簽定義，<img>是空標簽，它只包含屬性，並且沒

Linux20180416三周第四次課(4月9日）

磁盤分區4.1 df命令4.2 du命令4.3/4.4 磁盤分區擴展學習 parted分區gpt格式 http://www.apelearn.com/bbs/thread-7243-1-1.htmldf命令df - report file system disk space usagetmpfs說明文件系統是

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

相關推薦