通用的javascript　换行色换列色的小js

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行，列換色處理</title> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" id="Permit_View_Talbe"> <tr > <td align="center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer">列頭</td> <td align="center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer">列頭</td> <td align="center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer">列頭</td> <td align="center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer">列頭</td> </tr> <tr style="background:#00CC99;color:#FF0000" onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td width="25%" height="16">sdfsdfsdfsdfsd</td> <td width="25%">sdfsdfds</td> <td width="25%">sdfsd</td> <td width="25%">sdfsdfsd</td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr style="background:#FF00FF;color:#000000" onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td>22222</td> <td>33333</td> <td>232323</td> <td>23232</td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> <script language="javascript"> //table_tr_td_color.js //让表的tr和td进行换色 //在页面最下面执行：Init_Table_Tr_Td("Permit_View_Talbe"); //需要换色的行代码：Chang_Tr_over(this,document.all.表id,1)为换色　Chang_Tr_over(this,document.all.表id,0)为恢复原色 //例： <tr onMouseOver="Chang_Tr_over(this,document.all.Permit_View_Talbe,1)" onMouseOut="Chang_Tr_over(this,document.all.Permit_View_Talbe,0)"> //需要换色的列代码：Change_TdBgColor(this,document.all.表id) //注：行和列的背景色在默認的情況下請用bgcolor和background來定義 //根据需要，可以调整代码里的值是否 for循环里的条件值 -1 //最好是用background //設置列的換色------------------------ var Td_BackGround_Color_Array = Array(); var Td_Font_Color_Array = Array(); //選中後RD的顏色和字體的顏色 var Change_BackGround_color ="#4684c1"; var Change_Font_color ="#ffffff"; //下面兩色為原始的背景色和原始字的顏色 var Old_BackGround_Color = "#ffffff"; var Old_Font_color = "#000000"; //-------------------------------------- //設置行的換色 var Tr_Change_BackGround="#72a3cf"; var Tr_Change_Fontcolor="#ffffff"; var Cell_Selected_Array = Array(); function Init_Table_Tr_Td(Table_id){ var Table_Object = document.all.item(Table_id); var Table_Tr_Length = parseInt(Table_Object.rows.length); var Table_Td_Length = parseInt(Table_Object.rows[1].cells.length); //初始化記錄表格中的每一個RD的背景色和字體顏色 for(var i=0;i<Table_Tr_Length;i++){ Td_BackGround_Color_Array[i] = Array(); Td_Font_Color_Array[i] = Array(); for(var y=0;y<Table_Td_Length;y++){ //如果初始情況下沒有進行設置style.backgrund的話，則默認為上面設置的原始色 if(!Table_Object.rows[i].cells[y].style.background){ if(Table_Object.rows[i].style.background){ Table_Object.rows[i].cells[y].style.background=Table_Object.rows[i].style.background; }else{ if(Table_Object.rows[i].bgColor){ Table_Object.rows[i].cells[y].style.background=Table_Object.rows[i].bgColor; }else{ if(Table_Object.rows[i].cells[y].bgColor) Table_Object.rows[i].cells[y].style.background=Table_Object.rows[i].cells[y].bgColor; else Table_Object.rows[i].cells[y].style.background=Old_BackGround_Color;//否則為設置的底色 } } } //如果初始情況下沒有進行設置style.color的話，則默認為上面設置的原始色 if(!Table_Object.rows[i].cells[y].style.color){ if(!Table_Object.rows[i].style.color){ Table_Object.rows[i].cells[y].style.color =Old_Font_color; }else{ Table_Object.rows[i].cells[y].style.color =Table_Object.rows[i].style.color; } } Td_BackGround_Color_Array[i][y] = Table_Object.rows[i].cells[y].style.background; Td_Font_Color_Array[i][y] = Table_Object.rows[i].cells[y].style.color; }// END FOR Y }// END FOR I } //設置列的顏色 function Change_TdBgColor(me,Table_Object){ var tdobject = me; while(tdobject.tagName!="TD"){tdobject = tdobject.parentElement;} var tdindex = tdobject.cellIndex; var Table_Tr_Length = parseInt(Table_Object.rows.length); var Table_Td_Length = parseInt(Table_Object.rows[0].cells.length); for(var i=1;i<Table_Tr_Length;i++){ if(Table_Object.rows[i].cells[tdindex].style.background==Td_BackGround_Color_Array[i][tdindex]){ Table_Object.rows[i].cells[tdindex].style.background=Change_BackGround_color; Table_Object.rows[i].cells[tdindex].style.color=Change_Font_color; Cell_Selected_Array.push(tdindex); }else{ Table_Object.rows[i].cells[tdindex].style.background=Td_BackGround_Color_Array[i][tdindex]; Table_Object.rows[i].cells[tdindex].style.color=Td_Font_Color_Array[i][tdindex]; for(var c=0;c<Cell_Selected_Array.length;c++){ if(Cell_Selected_Array[c] == tdindex) Cell_Selected_Array.splice(c,1); } } } } //設置行的顏色 function Chang_Tr_over(me,Table_object,flag){ var trobject = me; while(trobject.tagName!="TR"){trobject = trobject.parentElement;} var trindex = trobject.rowIndex; var Table_Tr_Length = parseInt(Table_object.rows.length); var Table_Td_Length = parseInt(Table_object.rows[trindex].cells.length); var flag_td =","+Cell_Selected_Array+","; for(var i=0;i<Table_Td_Length;i++){ var value = ","+i+","; if(flag_td.indexOf(value)!=-1) continue; if(flag==1){ Table_object.rows[trindex].cells[i].style.background=Tr_Change_BackGround; Table_object.rows[trindex].cells[i].style.color=Tr_Change_Fontcolor; }else{ Table_object.rows[trindex].cells[i].style.background=Td_BackGround_Color_Array[trindex][i]; Table_object.rows[trindex].cells[i].style.color=Td_Font_Color_Array[trindex][i]; } } } Init_Table_Tr_Td("Permit_View_Talbe"); </script> 行，列換色處理列頭列頭列頭列頭 sdfsdfsdfsdfsd sdfsdfds sdfsd sdfsdfsd 22222 33333 232323 23232 //table_tr_td_color.js //让表的tr和td进行换色 //在页面最下面执行：Init_Table_Tr_Td("Permit_View_Talbe"); //需要换色的行代码：Chang_Tr_over(this,document.all.表id,1)为换色　Chang_Tr_over(this,document.all.表id,0)为恢复原色 //例： //需要换色的列代码：Change_TdBgColor(this,document.all.表id) //注：行和列的背景色在默認的情況下請用bgcolor和background來定義 //根据需要，可以调整代码里的值是否 for循环里的条件值 -1 //最好是用background //設置列的換色------------------------ var Td_BackGround_Color_Array = Array(); var Td_Font_Color_Array = Array(); //選中後RD的顏色和字體的顏色 var Change_BackGround_color ="#4684c1"; var Change_Font_color ="#ffffff"; //下面兩色為原始的背景色和原始字的顏色 var Old_BackGround_Color = "#ffffff"; var Old_Font_color = "#000000"; //-------------------------------------- //設置行的換色 var Tr_Change_BackGround="#72a3cf"; var Tr_Change_Fontcolor="#ffffff"; var Cell_Selected_Array = Array(); function Init_Table_Tr_Td(Table_id){ var Table_Object = document.all.item(Table_id); var Table_Tr_Length = parseInt(Table_Object.rows.length); var Table_Td_Length = parseInt(Table_Object.rows[1].cells.length); //初始化記錄表格中的每一個RD的背景色和字體顏色 for(var i=0;i [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在ie中，事件对象是作为一个全局变量来保存和维护的。所有的浏览器事件,不管是用户触发的，还是其他事件，都会更新window.event 对象。所以在代码中，只要轻松调用 window.event 就可以轻松获取事件对象，再 >>>详细阅读

本文标题：通用的javascript　换行色换列色的小js

地址：http://www.17bianji.com/kaifa2/JS/30573.html

1/2 1

通用的javascript 换行色换列色的小js

通用的javascript　换行色换列色的小js