管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

通用的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>

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

教程首页 更多教程