<Table width = "80%" border = "0" align = "center" cellpadding = "2" cellspacing = "2" bgcolor = "# f4f4f4" id = "phx"> <tr> <td> </tr> <td> </td> </tr> <td> </td> <td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The above Code allows you to move the mouse over a cell, and the cell color changes. Now I want to move the mouse over a cell, but the entire column will change color and I don't know if it can be implemented?
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> how to define the color change behavior of the mouse column of a table </title> <style> body {font: normal 12px auto" Trebuchet MS ", Verdana, Arial, helvetica, sans-serif; color: #4f6b72; background: # E6EAE9 ;}. mytable {width: 80%; padding: 0; margin: 0 ;}. mytable td {border-bottom: 1px solid # C1DAD7; background: # fff; font-size: 12px; padding: 6px 6px 0px; align: center; color: #4f6b72 ;} td. alt {background: # F5FAFA; text-align: center; color: #797268;} td. alt {background: # FFFFFF; text-align: center; color: #000;} td. spec {border-top: 0; background: # fff; text-align: center; font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;} td. specalt {border-top: 0; background: # f5fafa; text-align: center; font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268 ;}</style> </pead> <body> <table class = mytable cellspacing = "0" id = "table1" onmouseover = "senfe (this) "onmouseout =" senfe (this) "> <tr> <td class =" alt "height =" 45 "> </td> <td class =" alt "height =" 45 "> </td> <td class = "alt" height = "45"> </td> <td class = "alt" height = "45"> </td> <td class = "alt" height = "45"> </td> </tr> <td class = "alt" height = "45"> </td> <td class = "baialt "height =" 45 "> </td> <td class =" alt "height =" 45 "> </td> <td class =" baialt "height =" 45"> </td> <td class = "alt" height = "45"> </td> </tr> <td class = "alt" height = "45 "> </td> <td class =" baialt "height =" 45 "> </td> <td class =" alt "height =" 45 "> </td> <td class = "baialt" height = "45"> </td> <td class = "alt" height = "45"> </td> </tr> <tr> <td class = "alt" height = "45"> </td> <td class = "baialt" height = "45"> </td> <td class =" alt "height =" 45 "> </td> <td class =" baialt "height =" 45 "> </td> <td class =" alt "height =" 45 "> </td> </tr> </table> <p align =" center "> when the mouse passes, you want to change the color of the column (preferably reversed ), example: </p> <table class = mytable cellspacing = "0" id = "table2"> <tr align = "center"> <td class = "alt Alt" height = "45"> </td> <td class = "alt" height = "45"> </td> <td class = "alt" height = "45"> </td> <td class = "alt" height = "45"> </td> <td class = "alt" height = "45"> </td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The Code has been posted, and now the mouse moves to the cell to change color
Phx. rows [I]. cells [j]. onmouseover = function ()
{
If (pObj! = This ){
This. bgColor = overcolor ;}
}
And cell color removal
Phx. rows [I]. cells [j]. onmouseout = function ()
{
If (pObj! = This ){
This. bgColor = outcolor ;}
}
All have been solved ·
The remaining problem is phx. rows [I]. cells [j]. onclick: After I click a cell in the table, I hope that the column where the cell is located will change color. What can I do?
<Table width = "80%" border = "0" align = "center" cellpadding = "2" cellspacing = "2" bgcolor = "# f4f4f4" id = "phx"> <tr> <td> </tr> <td> </td> </tr> <td> </td> <td> </tr> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]