首页 美食 育儿 手工 生活 美妆 美容 设计 电脑 综合
电脑网络
搜索
首页 电脑网络 全部栏目 电脑网络最新信息 Web开发

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

2016-02-19 09:54 7 1 收藏

想要天天向上，就要懂得享受学习。图老师为大家推荐通用的javascript　换行色换列色的小js，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！

【 tulaoshi.com - Web开发 】

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 style="text-align:center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer"列頭/td
    td style="text-align:center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer"列頭/td
    td style="text-align:center" onClick="Change_TdBgColor(this,document.all.Permit_View_Talbe)" style="cursor:pointer"列頭/td
    td style="text-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)"
    td22222/td
    td33333/td
    td232323/td
    td23232/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;iTable_Tr_Length;i++){
        Td_BackGround_Color_Array[i] = Array();
        Td_Font_Color_Array[i] = Array();

        for(var y=0;yTable_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;iTable_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;cCell_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;iTable_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需刷新才能执行]

来源:https://www.tulaoshi.com/n/20160219/1592611.html

看过《通用的javascript　换行色换列色的小js》的人还看了以下文章 更多>>

延伸阅读
JavaScript教程:JS的语句及语法
标签： Web开发
JavaScript所提供的语句分为以下几大类： 1.变量声明，赋值语句：var。 语法如下： var 变量名称 [=初始值] 例：var computer = 32 //定义computer是一个变量，且有初值为32。 2.函数定义语句：function，return。 语法如下： function 函数名称 （函数所带的参数） ｛ ...
JavaScript教程:基于对象的JS语言范例
标签： Web开发
JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象...
JavaScript/JS实现自动跳出Frame
标签： Web开发
有时侯，你的页面会被别人的frame引用，含在别人的frame中(有时一些站点因内容不足， 会将别人的页面当作自己的一个frame,看起来像是自己本身的页面) 。你当然不会高兴， 访问者也觉得看着不方便。 用了这个js，一旦被别人frame了，会自动弹出。你就不用再担心了！ 将下代码copy入你网页body和/body中即可。 SCRIPT LANGUAGE=JAVASCR...
JavaScript教程:JS对象系统的使用范例
标签： Web开发
使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。 三、范例 例1:下面我们通过一个例子来说明文档对象的综合应用。输出结果见图6-2所示。 Test6_2.htm html head /HEAD BOdy Form Name="mytable" 请输入...
javascript js cookie的存储,获取和删除
标签： Web开发
使用方法： //1、存储Cookie //2、参数说明： 1、参数1：Cookie存储Name，参数2：Cookie要存储的值 //3、例子如下： setCookie('Method',match); //1、获取Cookie //2、参数说明： 1、参数1：Cookie存储的Name //3、例子如下： getCookie('Method') //1、删除Cookie //2、参数说明： 1、参数1：Cookie存储的Name /...
查看更多精彩>>
北漂部落 北漂部落

经验教程

579

收藏

95
最新文章
Web开发

精华推荐

JavaScript/JS密码输入框的问题

JavaScript/JS密码输入框的问题

凝雪紫衣88

js教程:JavaScript作用域(Scope)

js教程:JavaScript作用域(Scope)

闫霄宇

JS教程:JavaScript全半角转换

JS教程:JavaScript全半角转换

哎呦喂嘿哼

热门标签

Web开发 web WEB工具 程序开发 移动开发 Web标准 开发工具 宝宝右脑开发 WEB服务器 web应用程序 JavaScript JS 换行 卡西欧手表换电池的方法 小闹钟的画法 酒店的小知识 小乌龟的早餐 立春的双色饺子 小松鼠的松仁玉米 最简单的小蛋糕
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部