一个简单的js实现的隔行变色脚本

最新推荐文章于 2025-05-16 11:44:09 发布
原创 最新推荐文章于 2025-05-16 11:44:09 发布 · 1.6k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#function #stylesheet #javascript #table #generator
#border
本文介绍了一个用于实现表格隔行变色效果的JavaScript插件。该插件支持自定义奇数行、偶数行及鼠标悬停时的样式，并提供点击监听功能。文章详细展示了如何配置选项并应用到具体表格元素上。

 

 

 

 

if (typeof (ocellus) == "undefined") {
    _o = ocellus = {};
}
if (typeof (_o.autoChange) == "undefined") {
    _o.autoChange = {};
} else {
    alert("AutoChange is already set!");
}
_o.autoChange = function (tbodyID, changeOptions) {
    this.tablebody = _o.DOM.gE(tbodyID);
    if (!this.tablebody) {
        return 0;
    }
    this.oP = changeOptions ? changeOptions : {};

    var k, def = {oddClass:"autoChangeOdd",evenClass:"autoChangeEven", overClass:"autoChangeOver"};
    for (k in def) {
        if (typeof (this.oP[k]) != typeof (def[k])) {
            this.oP[k] = def[k];
        }
    }
    
    var p = this;
    for (var i=0;i<this.tablebody.rows.length ;i++ ){
        if (typeof (this.oP.clickListener) == "function") {
            this.tablebody.rows[i].onclick=function(){
                p.oP.clickListener(this.rowIndex,this);
            }
        }
        if (this.tablebody.rows[i].rowIndex%2==1){
            this.tablebody.rows[i].className=this.oP.oddClass;
            this.tablebody.rows[i].onmouseover=function (){
                if(this.className && (this.className.indexOf(p.oP.oddClass)>=0)){
                    this.className = this.className.replace(p.oP.oddClass, p.oP.overClass);
                }else{
                    this.className = p.oP.overClass;
                }
            };
            this.tablebody.rows[i].onmouseout=function (){
                if(this.className && (this.className.indexOf(p.oP.overClass)>=0)){
                    this.className = this.className.replace(p.oP.overClass, p.oP.oddClass);
                }else{
                    this.className = p.oP.oddClass;
                }
            };
        }else{
            this.tablebody.rows[i].className=this.oP.evenClass;
            this.tablebody.rows[i].onmouseover=function (){
                if(this.className && (this.className.indexOf(p.oP.evenClass)>=0)){
                    this.className = this.className.replace(p.oP.evenClass, p.oP.overClass);
                }else{
                    this.className = p.oP.overClass;
                }
            };
            this.tablebody.rows[i].onmouseout=function (){
                if(this.className && (this.className.indexOf(p.oP.overClass)>=0)){
                    this.className = this.className.replace(p.oP.overClass, p.oP.evenClass);
                }else{
                    this.className = p.oP.evenClass;
                }
            };
        }
    }
};
_o.autoChange.onMouseOver = function(obj, specialClassName){
    obj.className = specialClassName;
};
_o.autoChange.onMouseOut = function(obj, normalClassName){
    obj.className = normalClassName;
};
if (typeof (_o.DOM) == "undefined") {
    _o.DOM = {};
}
_o.DOM.gE = function (e) {
    var t = typeof (e);
    if (t == "undefined") {
        return 0;
    } else {
        if (t == "string") {
            var a = document.getElementById(e);
            if (!a) {
                return 0;
            } else {
                if (typeof (a.appendChild) != "undefined") {
                    return a;
                } else {
                    return 0;
                }
            }
        } else {
            if (typeof (e.appendChild) != "undefined") {
                return e;
            } else {
                return 0;
            }
        }
    }
};

在使用时主要有三步，首先要应用隔行变色的tbody必须有id，其次要定义一个用来设置的数组

 

var as_options = {
    oddClass:"autoChangeOdd",
    evenClass:"autoChangeEven",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) { 
        if(theRow.className && (theRow.className.indexOf(' autoChecked1')>=0)){
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else{
            theRow.className = theRow.className + ' autoChecked1';
        }
    }
}

 其中clickListener只能是一个方法，否则会忽略

最后调用AutoChange

 

var as_change = new ocellus.autoChange('goaler1', as_options);

 

下面是测试用的网页

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript" type="text/javascript" src="ocl_autochang.js"></script>
<link rel="stylesheet" href="ocl_autochang.css" type="text/css" media="screen" charset="utf-8" />

</head>

<body>
 
<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tbody id="goaler1">
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    </tbody>
</table>
<br><br><br><br><br>
<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tbody id="goaler2">
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    </tbody>
</table>
<script language="JavaScript">
<!--
var as_options = {
    oddClass:"autoChangeOdd",
    evenClass:"autoChangeEven",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) { 
        if(theRow.className && (theRow.className.indexOf(' autoChecked1')>=0)){
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else{
            theRow.className = theRow.className + ' autoChecked1';
        }
    }
}

var as_change = new ocellus.autoChange('goaler1', as_options);
var as_options2 = {
    oddClass:"autoChangeEven",
    evenClass:"autoChangeOdd",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) { 
        if(theRow.className && (theRow.className.indexOf(' autoChecked2')>=0)){
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else{
            theRow.className = theRow.className + ' autoChecked2';
        }
    }
}
var as_change = new ocellus.autoChange('goaler2', as_options2);
//-->
</script>

</body>
</html>

 

.autoChangeOdd{
    background-color: #F0F0FF;
}
.autoChangeEven{
    background-color: #F9F9FF;
}
.autoChangeOver{
    background-color: #E0E0FF;
}
.autoChecked1{
    color: #FF0000;
}
.autoChecked2{
    color: #00FF00;
}
easyroom
关注
原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 733
就是 这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
js之隔行换色
weixin_58462329的博客
04-14 979
大家可以看一下，我把具体解释都写在代码里面的注释上面了，不会的看下注释哦。接下来就在js里面写时间了，先写点击增加按钮执行的操作。大家好，今天来学习的是增加表单并且使他们每隔一行变色。如上图所示，这就是我们今天需要完成的效果。我们先写一个表格并且修改一下他们的样式。先让大家看下下效果图。
JS实现隔行换色
m0_71966801的博客
07-07 1013
在 JavaScript 部分，我们首先通过 getElementById 方法获取到表格元素。然后使用 querySelectorAll 方法选择所有带有 "row" 类名的 tr 元素，在循环中对每个行元素进行判断，如果行索引是奇数，则将其添加 "even" 类名，以改变其背景色。上述事例使用了一张表格来展示数据，并给每个数据行的 tr 元素添加了类名 "row"。通过 CSS 样式设置了奇数行的背景色为灰色。
JS 隔行换色
温柔归故里
03-18 725
JS 隔行换色
用js制作隔行换色
BANaanaa的博客
12-02 447
用js制作隔行换色
webpack简单介绍和使用
qq_45902025的博客
05-16 221
webpack简单介绍和使用
JavaScript 实现表格隔行变色
“跟他人学，和自己比”
03-02 4693
JavaScript 实现表格隔行变色 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaaaa; /*合并边框线*/ border-collapse: collapse; } #data{ width: 600px; ...
jQuery实现HTML表格隔行变色及鼠标悬停变色效果
小李专栏
11-02 9076
以下代码实现效果：1.表格隔行变色。2.鼠标悬停在表格行上时变色。 一：在页面内引入jquery.js。我使用的是jquery-1.6.min.js。 二：加入如下js代码 //隔行变色 $(document).ready(function(){ $(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为st
实现 列表隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-25 1235
创建列表隔行变色项目 新建项目空目录，并运行npm init -y命令，初始化包管理配置文件package.json 新建src源代码目录 新建src->index.html首页 初始化首页基本的结构 运行npm install jquery -s命令，安装jQuery 通过模块化的形式，实现列表隔行变色效果 在项目中安装和配置webpack 运行npm install webpack webpack-cli -D命令，安装webpack相关的包 在项目目录中，创建名为webpack.confi
实现网页表格隔行变色的技术实践
最新发布
weixin_36487018的博客
05-16 800
目前市场上存在多种响应式框架，如Bootstrap、Foundation、Skeleton等。这些框架提供了一套预定义的CSS样式和JavaScript组件，使开发者能够快速搭建响应式网页。以Bootstrap为例，它是一个流行的响应式框架，提供了一套网格系统，可以轻松地实现复杂的布局。Bootstrap的栅格系统通过定义12列布局，允许元素按比例分配空间。</div>以上代码展示了如何使用Bootstrap的栅格类来创建三列等宽的布局，每一列占据4个栅格（总共12个栅格）。md。
隔行变色标签html,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
weixin_31304499的博客
06-21 490
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】发布时间：2020-09-07 23:30:37来源：脚本之家阅读：118作者：webbc本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考，具体如下：最近一直在看JavaScript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接下...
HTML5制作斑马线表格,JavaScript实现的斑马线表格效果【隔行变色】
weixin_39653078的博客
06-11 1226
本文实例讲述了JavaScript实现的斑马线表格效果。分享给大家供大家参考，具体如下：虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外)，所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。html表格部分...
使用birt脚本设置隔行变色
zl532zl25的专栏
07-13 238
一。birt交叉表设置隔行变色 原创网址：http://huhuanqadn.iteye.com/blog/419758 效果如下图： [img]/upload/attachment/124760/9a730465-649c-34d1-84c2-3d45f96cc77e.png[/img] 没有进行多余的配色了，比较丑。呵呵。 现在看看怎么实现的。 怎么建报表，数据集，交叉...
隔行变色java代码_纯js实现隔行变色效果
weixin_34194499的博客
03-02 372
本文实例为大家分享了js实现隔行变色的具体代码，供大家参考，具体内容如下function createTable(){//创建表格var table = document.createElement("table");//设置表格的行数for(var i=0;i<4;i++){var tr = document.createElement("tr");//设置表格的列数for( var j=...
原生JS操作网页给p元素添加onclick事件及表格隔行变色
unity3d，unity3d教程下载
12-02 1077
1. 给网页中的所有p元素添加onclick事件：  代码如下: Insert title here --> window.onload=function(){ var items=document.getElementsByTagName("p"); for(i=0;i items[i].onclick=function(){ aler
一个用CSS实现隔行变色的技术
03-24 2233
<br />以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多java脚本判断，写了许多像下面的例子。Html代码  <table>  <%int c =0;%>    //循环取列表     <%          if (c % 2 == 0)           {           className = "一种颜色";          } else           {              className = "另外一种颜色";          }    
php取余255,js取模（求余数）隔行变色
weixin_34676828的博客
03-19 180
js取模(求余数)隔行变色复制代码 代码如下:js取模隔行变色window.onload=function(){var oUl=document.getElementById('ul1');var aLi=oUl.getElementsByTagName('li');for(var i=0; i< aLi .length; i++){if(i%2==0) //取模 求余数{aLi[i].s...
在java中如何实现隔行变色_一个用CSS实现隔行变色的技术
weixin_32787251的博客
02-27 390
以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多java脚本判断，写了许多像下面的例子。Html代码 //循环取列表if(c%2==0){className="一种颜色";}else{className="另外一种颜色";}c++;%>//循环结束//循环取列表if (c % 2 == 0){className = "一种颜色";} else{classN...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值