<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>行，列換色處理</title>
</head>
<body>
<tablewidth="100%"border="1"cellspacing="0"cellpadding="0"id="Permit_View_Talbe">
<tr>
<tdalign="center"onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)"style="cursor:pointer">列頭</td>
<tdalign="center"onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)"style="cursor:pointer">列頭</td>
<tdalign="center"onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)"style="cursor:pointer">列頭</td>
<tdalign="center"onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)"style="cursor:pointer">列頭</td>
</tr>
<trstyle="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)">
<tdwidth="25%"height="16">sdfsdfsdfsdfsd</td>
<tdwidth="25%">sdfsdfds</td>
<tdwidth="25%">sdfsd</td>
<tdwidth="25%">sdfsdfsd</td>
</tr>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<trstyle="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<tronMouseOver="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>
<scriptlanguage="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)为恢复原色
//例：<tronMouseOver="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
//設置列的換色------------------------
varTd_BackGround_Color_Array=Array();
varTd_Font_Color_Array=Array();
//選中後RD的顏色和字體的顏色
varChange_BackGround_color="#4684c1";
varChange_Font_color="#ffffff";
//下面兩色為原始的背景色和原始字的顏色
varOld_BackGround_Color="#ffffff";
varOld_Font_color="#000000";
//--------------------------------------
//設置行的換色
varTr_Change_BackGround="#72a3cf";
varTr_Change_Fontcolor="#ffffff";
varCell_Selected_Array=Array();
functionInit_Table_Tr_Td(Table_id){
varTable_Object=document.all.item(Table_id);
varTable_Tr_Length=parseInt(Table_Object.rows.length);
varTable_Td_Length=parseInt(Table_Object.rows[1].cells.length);
//初始化記錄表格中的每一個RD的背景色和字體顏色
for(vari=0;i<Table_Tr_Length;i++){
Td_BackGround_Color_Array[i]=Array();
Td_Font_Color_Array[i]=Array();
for(vary=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;
}//ENDFORY
}//ENDFORI
}
//設置列的顏色
functionChange_TdBgColor(me,Table_Object){
vartdobject=me;
while(tdobject.tagName!="TD"){tdobject=tdobject.parentElement;}
vartdindex=tdobject.cellIndex;
varTable_Tr_Length=parseInt(Table_Object.rows.length);
varTable_Td_Length=parseInt(Table_Object.rows[0].cells.length);
for(vari=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(varc=0;c<Cell_Selected_Array.length;c++){
if(Cell_Selected_Array[c]==tdindex)Cell_Selected_Array.splice(c,1);
}
}
}
}
//設置行的顏色
functionChang_Tr_over(me,Table_object,flag){
vartrobject=me;
while(trobject.tagName!="TR"){trobject=trobject.parentElement;}
vartrindex=trobject.rowIndex;
varTable_Tr_Length=parseInt(Table_object.rows.length);
varTable_Td_Length=parseInt(Table_object.rows[trindex].cells.length);
varflag_td=","+Cell_Selected_Array+",";
for(vari=0;i<Table_Td_Length;i++){
varvalue=","+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 |
【通用的javascript 换行色换列色的小js】相关文章：