表格移動變色 / 單擊變色 / 雙擊連結 (不復選只單行變色) 的問題- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1118

會員總數：246713
討論主題：190131

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> 表格移動變色 / 單擊變色 / 雙擊連結 (不復選只單行變色) 的問題

[]

[我要回覆]

表格移動變色 / 單擊變色 / 雙擊連結 (不復選只單行變色) 的問題
價值 : 90 QP 點閱數:2683 回應數:4

樓主

老古

81	111
1220	147

發送站內信

請教高手大大，在下為這個問題以經查找許多資料，但還是解決不了~~請高手大大們指點小弟一下 QQ

我希望能夠當滑鼠移到表格上時能整行變色，當我單擊表格時整行能變色，但是當我單擊其它表格時，原來變色的表格要恢復原來的顏色，只有我單擊的表格才會變色，而雙擊表格時跳連結。
但是.....下面的CODE是做到了，可是= =....變成移開表格後就會被 onMouseOut="this.style.backgroundColor='#FFFFFF';" 這個顏色蓋掉了.....請問高手大大能幫忙指點小弟一下嗎 >"<....非常感激 QQ"

原始碼如下：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁1</title>
<script>
var $ = function(id){return document.getElementById(id)};
function ss(obj){
    if(!$('table1').trcolor)
    {$('table1').trcolor=obj;obj.style.backgroundColor="red";return;}
    $('table1').trcolor.style.backgroundColor="#FFFFFF";
    obj.style.backgroundColor="red";
    $('table1').trcolor=obj
}
</script>
</head>

</html>

本篇文章發表於2012-12-15 03:58

1樓回應香帥	那拿掉後面那個onMouseOut="this.style.backgroundColor='#FFFFFF';" 變成如下程式碼不就好了嗎? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>新增網頁1</title> <script> var $ = function(id){return document.getElementById(id)}; function ss(obj){ if(!$('table1').trcolor) {$('table1').trcolor=obj;obj.style.backgroundColor="red";return;} $('table1').trcolor.style.backgroundColor="#FFFFFF"; obj.style.backgroundColor="red"; $('table1').trcolor=obj } </script> </head> <body> <table id="table1"> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>1111111111111</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>2222</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>3333333333</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>444444444444</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>555555555555</td> </tr> </table> </body> </html> 本篇文章回覆於2012-12-15 08:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應老古	onMouseOut="this.style.backgroundColor='#FFFFFF';" 拿掉的話.....其它的表格滑鼠移過去變色之後移開就不會變回白底了~~~~ 本篇文章回覆於2012-12-15 09:41 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	那改為如下程式碼就ok, 測試網址在http://ap.a168a.com/test/selectcolor.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>選單顏色</title> </head> <body> <table id="table1" name="hello" > <tr onClick="ss(this)" id="tr1" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>1111111111111</td> </tr> <tr onClick="ss(this)" id="tr2" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>2222</td> </tr> <tr onClick="ss(this)" id="tr3" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>3333333333</td> </tr> <tr onClick="ss(this)" id="tr4" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>444444444444</td> </tr> <tr onClick="ss(this)" id="tr5" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>555555555555</td> </tr> </table> </body> </html> <script> function ss(obj){ if (document.getElementById("table1").name=="hello"){ document.getElementById(obj.id).style.backgroundColor="red"; document.getElementById("table1").name = obj.id; } else { document.getElementById(document.getElementById("table1").name).style.backgroundColor="#FFFFFF"; document.getElementById("table1").name = obj.id; document.getElementById(obj.id).style.backgroundColor="red"; } } function myout(obj){ //依樓主需求目前離開保留選單選擇色彩,因此不必再處理 } function myover(obj){ if (document.getElementById("table1").name=="hello"){ document.getElementById(obj.id).style.backgroundColor="#EEF7FF"; document.getElementById("table1").name = obj.id; } else { document.getElementById(document.getElementById("table1").name).style.backgroundColor="#FFFFFF"; document.getElementById("table1").name = obj.id; document.getElementById(obj.id).style.backgroundColor="#EEF7FF"; } } </script> 本篇文章回覆於2012-12-16 11:47 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓最有價值解答浩瀚星空	用CSS不是簡單明白嗎?? <!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=utf-8" /> <title>無標題文件</title> <style type="text/css"> /* 原來的TR顏色可不設定 / .sel_tab tr{ background-color:#FC9 color:#03C; } / 移上去要顯示的顏色 / .sel_tab tr:hover{ background-color:#C00; color:#FFF; } / 選定時顯示的顏色 / .sel_tab tr#sel{ background-color:#CC0; color:#FFF; } / 選定時移上去顯示的顏色，看需求要不要用/ .sel_tab tr#sel:hover{ background-color:#C06; color:#FFF; } </style> <script> //控制選定的ID，利用ID的屬性變動 function selact(obj) { sel = obj.id; if(sel=='sel') { obj.id = ''; } else { obj.id = 'sel' } } </script> </head> <body> <table width="90%" border="0" class="sel_tab"> <tr onclick="selact(this)"> <td>AAAAAAAA</td> <td>BBBBBBBBBB</td> <td>CCCCCCCCC</td> </tr> <tr onclick="selact(this)"> <td>111111111</td> <td>222222222</td> <td>33333333</td> </tr> <tr onclick="selact(this)"> <td>444444444</td> <td>5555555555</td> <td>66666666</td> </tr> </table> </body> </html> 本篇文章回覆於2012-12-19 10:14 == 簽名檔 ==* --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓回應香帥	那拿掉後面那個onMouseOut="this.style.backgroundColor='#FFFFFF';" 變成如下程式碼不就好了嗎? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>新增網頁1</title> <script> var $ = function(id){return document.getElementById(id)}; function ss(obj){ if(!$('table1').trcolor) {$('table1').trcolor=obj;obj.style.backgroundColor="red";return;} $('table1').trcolor.style.backgroundColor="#FFFFFF"; obj.style.backgroundColor="red"; $('table1').trcolor=obj } </script> </head> <body> <table id="table1"> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>1111111111111</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>2222</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>3333333333</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>444444444444</td> </tr> <tr onClick="ss(this)" onDblclick=location.href='xxx.asp' onMouseOver="this.style.backgroundColor='#EEF7FF';" > <td>555555555555</td> </tr> </table> </body> </html> 本篇文章回覆於2012-12-15 08:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓作者回應老古	onMouseOut="this.style.backgroundColor='#FFFFFF';" 拿掉的話.....其它的表格滑鼠移過去變色之後移開就不會變回白底了~~~~ 本篇文章回覆於2012-12-15 09:41 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	那改為如下程式碼就ok, 測試網址在http://ap.a168a.com/test/selectcolor.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>選單顏色</title> </head> <body> <table id="table1" name="hello" > <tr onClick="ss(this)" id="tr1" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>1111111111111</td> </tr> <tr onClick="ss(this)" id="tr2" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>2222</td> </tr> <tr onClick="ss(this)" id="tr3" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>3333333333</td> </tr> <tr onClick="ss(this)" id="tr4" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>444444444444</td> </tr> <tr onClick="ss(this)" id="tr5" onDblclick=location.href='xxx.asp' onMouseOver="myover(this);" onMouseOut="myout(this);"> <td>555555555555</td> </tr> </table> </body> </html> <script> function ss(obj){ if (document.getElementById("table1").name=="hello"){ document.getElementById(obj.id).style.backgroundColor="red"; document.getElementById("table1").name = obj.id; } else { document.getElementById(document.getElementById("table1").name).style.backgroundColor="#FFFFFF"; document.getElementById("table1").name = obj.id; document.getElementById(obj.id).style.backgroundColor="red"; } } function myout(obj){ //依樓主需求目前離開保留選單選擇色彩,因此不必再處理 } function myover(obj){ if (document.getElementById("table1").name=="hello"){ document.getElementById(obj.id).style.backgroundColor="#EEF7FF"; document.getElementById("table1").name = obj.id; } else { document.getElementById(document.getElementById("table1").name).style.backgroundColor="#FFFFFF"; document.getElementById("table1").name = obj.id; document.getElementById(obj.id).style.backgroundColor="#EEF7FF"; } } </script> 本篇文章回覆於2012-12-16 11:47 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓最有價值解答浩瀚星空	用CSS不是簡單明白嗎?? <!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=utf-8" /> <title>無標題文件</title> <style type="text/css"> /* 原來的TR顏色可不設定 / .sel_tab tr{ background-color:#FC9 color:#03C; } / 移上去要顯示的顏色 / .sel_tab tr:hover{ background-color:#C00; color:#FFF; } / 選定時顯示的顏色 / .sel_tab tr#sel{ background-color:#CC0; color:#FFF; } / 選定時移上去顯示的顏色，看需求要不要用/ .sel_tab tr#sel:hover{ background-color:#C06; color:#FFF; } </style> <script> //控制選定的ID，利用ID的屬性變動 function selact(obj) { sel = obj.id; if(sel=='sel') { obj.id = ''; } else { obj.id = 'sel' } } </script> </head> <body> <table width="90%" border="0" class="sel_tab"> <tr onclick="selact(this)"> <td>AAAAAAAA</td> <td>BBBBBBBBBB</td> <td>CCCCCCCCC</td> </tr> <tr onclick="selact(this)"> <td>111111111</td> <td>222222222</td> <td>33333333</td> </tr> <tr onclick="selact(this)"> <td>444444444</td> <td>5555555555</td> <td>66666666</td> </tr> </table> </body> </html> 本篇文章回覆於2012-12-19 10:14 == 簽名檔 ==* --未登入的會員無法查看對方簽名檔--