`
jeelee
  • 浏览: 637038 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js 控制table行的颜色

prototypeIEFirefoxC++C 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>Table</title>
</head>

<script type="text/javascript">

/**
* 仿 Prototype 的 $ 方法
*/
window.$ = function(id) {
  if(typeof id == 'string') {
    return document.getElementById(id);
  }
  return id;
}

/**
* 色彩渐变
* @param start   起始颜色，使用 # 颜色表
* @param end     终止颜色
* @param step    渐变步长，大于 1 并且小于 200，默认为 16
*/
var ColorGradient = function(start, end, step) {
  this.start = this._toRGB(start);
  this.end = this._toRGB(end);
  this.step = (function() {
      if(!step || step < 1 || step > 200) {
        return 16;
      }
      return step;
    })();
  this.gradient = [];
}

ColorGradient.prototype = {

  // 获得渐变的颜色数组，以 6 位十六进制字符串返回
  getGradient : function() {
    return this._getGradient();
  },

  // 获得所设定的步长值
  getStep : function() {
    return this.step;
  },

  // 测试工作，用于在页面上渐变测试
  test : function() {
    var grad = this._getGradient();
    var n = 400 / this.step;
    var p = document.createElement('div');
    for(var i = 0; i < grad.length; i++) {
      var d = document.createElement('div');
      d.className = 'grad';
      d.style.width = n + 'px';
      d.style.backgroundColor = '#' + grad[i];
      p.appendChild(d);
    }
    document.body.appendChild(p);
  },

  // 生成渐变色数组
  _getGradient : function() {
    if(this.gradient.length > 0)  {
      // 如果渐变色变量中有值直接返回
      return this.gradienth;
    }
    // 生成各步的颜色
    for(var i = 0; i <= this.step; i++) {
      var color = this._getNewColor(i).toString(16);
      while(color.length < 6) {
        color = '0' + color;
      }
      this.gradient.push(color);
    }
    return this.gradient;
  },

  // 根据 RGB 变化量获得每步的 RGB 颜色
  _getNewColor : function(k) {
    var rgbStep = this._getStepRgb();
    var rgb = 0;
    for(var i = 0; i < 3; i++) {
      var c = Math.floor(this.start[i] + rgbStep[i] * k);
      rgb |= c << ((3 - i - 1) *;
    }
    return rgb;
  },

  // 获得 RGB 三种颜色的变化量
  _getStepRgb : function() {
    var rgb = [];
    // 依次获得 R、G、B 的变化步长
    for(var i = 0; i < 3; i++) {
      rgb.push(this._getStepVar(i));
    }
    return rgb;
  },

  // 根据渐变步长、起始、终止颜色获得步长的变化量
  _getStepVar : function(index) {
    return (this.end[index] - this.start[index]) / this.step;
  },

  // 将 # 颜色转换成 RGB 颜色数组
  // 索引 0 -- 红色 R
  // 索引 1 -- 绿色 G
  // 索引 2 -- 蓝色 B
  _toRGB : function(color) {
    var v = color.substring(1);
    var c = parseInt(v, 16);
    var rgb = [];
    for(var i = 0; i < 3; i++) {
      rgb.push(c >> ((3 - i - 1) * & 0xff);
    }
    return rgb;
  }
}

/**
* 事件处理工具类
*/
var Event = function(){}

Event = {

  /**
   * 为 element 使用 handler 处理程序添加至 event 事件
   * 兼容 IE 及 Firefox 等浏览器
   *
   * 例如为 botton 对象添加 onclick 事件，使用 clickEvent
   * 方法作为处理程序：
   *   Event.addEvent(botton, 'click', clickEvent);
   *
   * @param element  需要添加事件的对象（Object）
   * @param event    需要添加的事件名称（String），不加“on”
   * @param handler  需要添加的方法引用（Function）
   */
  addEvent : function(element, event, handler) {
    if(element.attachEvent) {
      element.attachEvent('on' + event, handler);
    } else if (element.addEventListener) {
      element.addEventListener(event, handler, false);
    } else {
      element['on' + event] = handler;
    }
  },

  /**
   * 添加事件处理程序时，只能添加一个方法的引用，并不能给
   * 方法加上参数。比如定义了 clickEvent(str) 这个方法，现
   * 在要将其作为 obj 的 onclick 的事件处理程序，就可以用：
   * obj.onclick = Event.getFuntion(null, clickEvent, str);
   */
  getFunction : function(obj, fun) {
    var args = [];
    obj = obj || window;
    for(var i = 2; i < arguments.length; i++) {
      args.push(arguments[i]);
    }
    return function() {
        fun.apply(obj, args);
      };
  }
}

var Table = function(id, time, start, end) {

  this.rows   = (function() {
      var tab = $(id);
      if(tab.tBodies.length == 0) {
        return tab.rows;
      }
      var rows = [];
      for(var i = 0; i < tab.tBodies.length; i++) {
        for(var j = 0; j < tab.tBodies[i].rows.length; j++) {
          rows.push(tab.tBodies[i].rows[j]);
        }
      }
      return rows;
    })();
  this.start  = start || Table.DEFAULT_START;
  this.end    = end || Table.DEFAULT_END;
  this.time   = time || Table.DEFAULT_TIME;
  var color = new ColorGradient(this.start, this.end, 16);
  this.grad   = color.getGradient();
  this.step   = color.getStep();
}

Table.DEFAULT_TIME = 10;
Table.DEFAULT_START = '#dcdcdc';
Table.DEFAULT_END = '#ffffff';

Table.prototype = {
  addEvent : function() {
    for(var i = 0; i < this.rows.length; i++) {
      this.rows[i].style.backgroundColor = this.end;
      Event.addEvent(this.rows[i], 'mouseover',
          Event.getFunction(this, this.overEvent, this.rows[i]));
      Event.addEvent(this.rows[i], 'mouseout',
          Event.getFunction(this, this.outEvent, this.rows[i]));
    }
  },
  overEvent : function(row) {
    row.style.backgroundColor = this.start;
    row.change = this.step;
  },
  outEvent : function(row) {
    var me = this;
    if(row.change-- > 0) {
      row.style.backgroundColor = '#' + me.grad[me.step - row.change];
      setTimeout(function() {
          me.outEvent(row);
        }, this.time);
    }
  },

  _getRows : function(id) {
    var tab = $(id);
    alert(tab.tBodies.length);
  }
}

window.onload = function() {
  var tab = new Table('tab');
  tab.addEvent();
}
</script>

<style type="text/css">
div.grad {
  float: left;
  height: 100px;
  margin: 0;
  padding: 0;
}
table {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-spacing: 0;
  font-family: 宋体,新宋体;
}
table td {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  padding: 2px 5px;
}
</style>

<body>
<div id="k1"></div>
<div id="k2"></div>
<div id="k3"></div>
<div id="k4"></div>
<div id="k5"></div>
<div id="k6"></div>
<div id="k7"></div>


<table id="tab" border="0" cellspacing="0">
<tbody>
  <tr>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
  </tr>
  <tr>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
    <td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
  </tr>
  </tbody>
</table>
</body>
</html>
分享到：
| JS 设置Cookie
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js控制table的tr变色

    ### JS 控制 Table 的 TR 变色 在 Web 开发中，通过 JavaScript 动态地改变表格 (`table`) 的样式是一种常见的操作。这种方式可以增强用户体验，使得数据展示更加直观、友好。本文将详细介绍如何利用 JavaScript 来...

    layui的表格table选中数据后更改本行的颜色

    首先，layui的表格组件通过JavaScript来动态渲染和控制。要实现选中行改变颜色的效果，我们需要监听表格的`on('row')`事件，这个事件会在用户点击表格行时触发。当事件触发时，我们可以获取到当前选中的行数据，并...

    改变选择table行的背景色

    一个常见的需求是当用户选中表格（`table`）中的某一行时，能够改变该行的背景颜色。这种方式可以直观地告诉用户当前的操作对象，同时提升整体的视觉效果。下面将详细解析如何实现这一功能。 #### 代码解析与实现...

    elementUI给table表头行设置背景颜色样式.pdf

    综上所述，通过使用Element UI的`header-cell-style`属性和自定义方法，我们可以轻松地实现对表格表头背景颜色的控制，从而满足不同场景下的界面定制需求。这种方法不仅适用于背景颜色，还适用于其他任何需要自定义...

    利用CSS控制表格table的交替颜色

    本文将详细介绍如何通过CSS控制表格`&lt;table&gt;`的交替颜色，并提供具体的代码示例。 ### 一、基本原理 在HTML中，`&lt;table&gt;`元素用于创建表格，而`&lt;tr&gt;`代表表格的一行，`&lt;td&gt;`则表示表格中的一个单元格。CSS提供了...

    uniapp-table中改版uni-table插件

    开发者通过自定义样式或者动态设置样式，实现了对单个单元格字体颜色的控制，以突出特定信息。 4. **选中行样式修改**：原组件的选中行样式可能较为单一，改版后开发者可能提供了更多的自定义选项，使得选中行的...

    CSS+JS实现table隔行变色

    这时，我们可以借助JavaScript（JS）来动态地改变行的样式。例如，使用jQuery库，我们可以监听表格的`DOMSubtreeModified`事件，一旦表格内容变化，就重新应用隔行变色： ```javascript $(document).ready(function...

    用JS控制表格的交替颜色.rar

    为了解决这一问题，我们可以使用JavaScript（JS）来实现表格行的交替颜色，提高用户的阅读体验。本教程将深入讲解如何用JS控制表格的交替颜色，使其呈现出更美观的视觉效果。 首先，我们需要理解HTML表格的基本结构...

    bootstrap-table.js

    通过引入这个JS文件，开发者可以利用JavaScript对象和方法来控制表格的行为，例如初始化表格、添加、删除或更新数据。 `bootstrap-table.css` 是样式表文件，负责定义Bootstrap Table的外观和布局。它继承了...

    css+js+table效果代码

    综上所述，【CSS+JS+Table效果代码】是前端开发中的实用技能，结合CSS的样式控制和JS的动态交互，可以创建出功能强大、用户体验良好的数据展示界面。通过分析和学习提供的代码资源，我们可以深入了解并掌握这些技术...

    javascript实现table选中的行以指定颜色高亮显示的方法

    此外，还可以通过CSS类来控制行的样式，而不是直接在JavaScript中操作样式字符串。 总之，通过本文提供的示例代码和分析，我们可以了解到如何使用JavaScript和HTML实现表格行的高亮显示功能，这不仅增强了页面的...

    CSS2+JS实现table隔行变色

    在CSS2中，我们可以利用`:nth-child()`伪类选择器来为表格的偶数行或奇数行添加不同的背景颜色。以下是一个简单的CSS代码示例： ```css table { width: 100%; border-collapse: collapse; } tr:nth-child(even) ...

    TreeTable,用于展开/折叠table的行

    2. **可交互性**：用户可以通过点击行的特殊图标（如加号或减号）来控制行的展开和折叠，也可以通过单击或双击行来执行其他操作，如查看详情或编辑数据。 3. **数据绑定**：TreeTable通常与后端数据源进行绑定，...

    Angularjs bootstrap table多选，支持单击行选中

    在本文中，我们将深入探讨如何在AngularJS框架中结合Bootstrap Table实现多选功能，并支持单击行选中。AngularJS是一种强大的前端JavaScript框架，而Bootstrap Table则是一个流行的UI组件库，用于创建美观且响应式的...

    修改grid行或列颜色

    在本篇内容中，我们将详细探讨如何通过ExtJS框架来修改Grid中行或列的颜色，以便于实现更直观的数据展示效果。...通过上述方法，我们可以灵活地控制ExtJS Grid中的行和列颜色，进一步提升用户体验和界面美观度。

    CSS 美化Table,可以多选Table的行和列

    表格的基本结构由`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）和`&lt;th&gt;`（表头）组成。通过以下属性，我们可以调整表格的外观： 1. **边框和间距**：使用`border`、`border-collapse`和`border-spacing`属性可以控制...

    控制table经典实例

    本主题将深入探讨“控制table的经典实例”，通过实例学习如何利用HTML和CSS创建美观且功能丰富的表格。 首先，`&lt;table&gt;` 标签是HTML中的一个基本元素，用于创建表格结构。它包括几个组成部分，如 `&lt;table&gt;`, `&lt;tr&gt;`...

    tableExport 前端数据导出工具

    5. **API接口**：TableExport提供丰富的API接口，开发者可以通过调用这些接口来控制导出行为，实现更精细的控制。 ### 使用步骤 1. **引入库文件**：首先在HTML文件中引入TableExport的JS和CSS文件，通常可以从CDN...

    关于表格（table）中checkbox等相关事件操作（动态添加行+隔行换色等相关）（jquery）

    3. **全选与反选**：在表头设置一个全选/全不选的复选框，可以控制所有行的选中状态。这需要绑定`click`事件，遍历所有的子复选框并更新它们的状态： ```javascript $("#selectAll").on("click", function() { if ...

    JS实现漂亮的表格table特效代码

    例如，使用`border-collapse`属性可以控制表格边框合并，`text-align`设置文本对齐，`background-color`改变单元格颜色。 3. **JavaScript增强交互**：JavaScript可以实现动态效果，比如点击单元格后高亮，排序数据...

Magicbox
Global site tag (gtag.js) - Google Analytics