基于JavaScript实现表格隔行换色

2024-10-02 16:59:37

表格隔行换色

需求分析

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色

技术分析

table对象集合 cells[]：返回包含表格中所有单元格的一个数组。 rows[]：返回包含表格中所有行的一个数组。 tBodies[]：返回包含表格中所有tbody 的一个数组。

步骤分析

确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素要操作表格中每一行动态的修改行的背景颜色
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script >
    function init(){
      //得到表格
      var tab = document.getElementById("tab");
      //得到表格中每一行
      var rows = tab.rows;
      //便利所有的行,然后根据奇数 偶数
      for(var i=1; i < rows.length; i++){
        var row = rows[i]; //得到其中的某一行
        if(i%2==0){
          row.bgColor = "yellow";
        }else{
          row.bgColor = "red"
        }
      }
    }
  </script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>分类ID</td>
    <td>分类名称</td>
    <td>分类商品</td>
    <td>分类描述</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>1</td>
    <td>手机数码</td>
    <td>华为,小米,尼康</td>
    <td>黑马数码产品质量最好</td>
    <td>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>2</td>
    <td>成人用品</td>
    <td>充气的</td>
    <td>这里面的充气电动硅胶的</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>3</td>
    <td>电脑办公</td>
    <td>联想,小米</td>
    <td>笔记本特卖</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>4</td>
    <td>馋嘴零食</td>
    <td>辣条,麻花,黄瓜</td>
    <td>年货</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"/>
    </td>
    <td>5</td>
    <td>床上用品</td>
    <td>床单,被套,四件套</td>
    <td>都是套子</td>
    <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
  </tr>
</table>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS+CSS实现Li列表隔行换色效果的方法

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh
Js 实现表格隔行换色一例

Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:
JS实现隔行换色的表格排序

1.获取元素 2.获取数据 3.绑定数据 4.隔行换色 5.表格排序 <table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr> <th class="cursor">姓名</th> <th class="cursor">年龄</th> <
利用JS动态生成隔行换色HTML表格的两种方法

用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色方法一. 代码: <!DOCTYPE html> <html> <head> <title>动态表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"
不用javascript实现带序号的表格隔行换色的效果

.test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨行深般若波罗密多时照见五蕴皆空度一切苦厄舍利子色不异空空不异色色既是空空既是色受想行识亦复如是舍利子是诸法空相不生不灭不垢不净不增不减是故空中
JS实现简洁(隔行换色、高亮显示)表格特效

JS实现的表格 document.write(' '); var i=0; while(i') } document.write(' '+i+' '); i++; //document.write(' '); } if(i%10==0){ document.write(' '); } document.write(' '); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function no
基于JavaScript实现表格隔行换色

表格隔行换色需求分析我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色技术分析 table对象集合 cells[]:返回包含表格中所有单元格的一个数组. rows[]:返回包含表格中所有行的一个数组. tBodies[]:返回包含表格中所有tbody 的一个数组. 步骤分析确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素要操作表格中每一行动态的修改
基于Jquery的表格隔行换色，移动换色，点击换色插件

效果图:编写JQUERY插件如下: 复制代码代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt
使用JQ完成表格隔行换色的简单实例

1.步骤分析: 第一步:引入jquery的类库第二步:直接写页面加载函数第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色. 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色&
jquery实现表格隔行换色效果

本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
表格隔行换色升级版

昨天弄了个表格隔行换色,但是只是一张表里换如果一个页面里出现多个表格需要怎么整捣鼓出新的结果如下: 复制代码代码如下: function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.onload=func } else{ window.onload=function(){ one(); func(); } } } function showtable(table
利用JavaScript的%做隔行换色的实例

如下所示: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> li { list-style-type: none; width: 300px; height: 30px; } </style> </head> <body> <ul>
jQuery实现表格隔行换色

本文实例为大家分享了jQuery实现表格隔行换色的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用JQ完成表格隔行换色</title> <script src="js/jquery.min.js"></script> <script> $(funct
表格隔行换色 css expression

第一行为其它颜色,这样写这个表达式表格CSS测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试表格测试

基于JavaScript实现表格隔行换色

相关推荐

随机推荐