<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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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需再刷新一下页面才能执行]
标签:
通用的javascript 换行色换列色的小js

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“通用的javascript 换行色换列色的小js”

暂无“通用的javascript 换行色换列色的小js”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。