`

javascript table美化鼠标滑动单元格变色

 
阅读更多

本文转载自:http://www.jb51.net/article/14736.htm

 

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>orbitz-like behavior for hovering over table

cells-jsDoc.cn</title>

<style type="text/css">

.cssguycomments {

background: #eee;

border: #ddd;

padding: 8px;

margin-bottom: 40px;

}

 

.cssguycomments p {

font: normal 12px/18px verdana;

}

 

table {

border-collapse: collapse;

}

 

thead th {

font: bold 13px/18px georgia;

text-align: left;

background: #fff4c6;

color: #333;

padding: 8px 16px 8px 8px;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

}

 

thead th.null {

background: #fff;

}

 

tbody th {

font: bold 12px/15px georgia;

text-align: left;

background: #fff9e1;

color: #333;

padding: 8px;

border-bottom: 1px solid #f3f0e4;

border-right: 1px solid #fff;

}

 

tbody td {

font: normal 12px/15px georgia;

color: #333;

padding: 8px;

border-right: 1px solid #f3f0e4;

border-bottom: 1px solid #f3f0e4;

}

 

/*  ��3���ǹؼ�   --cssrain.cn */

tbody td.on {

background: green;

}

 

thead th.on {

background: red;

}

 

tbody th.on {

background: red;

}

</style>

 

<script type="text/javascript">

/* 

For functions getElementsByClassName, addClassName, and removeClassName 

Copyright Robert Nyman, <a href="http://www.robertnyman.com" target="_blank">http://www.robertnyman.com</a> 

Free to use if this text is included 

*/

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

}

}

}

function getElementsByClassName(className, tag, elm) {

var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");

var tag = tag || "*";

var elm = elm || document;

var elements = (tag == "*" && elm.all) ? elm.all : elm

.getElementsByTagName(tag);

var returnElements = [];

var current;

var length = elements.length;

for ( var i = 0; i < length; i++) {

current = elements[i];

if (testClass.test(current.className)) {

returnElements.push(current);

}

}

return returnElements;

}

function addClassName(elm, className) {

var currentClass = elm.className;

if (!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i")

.test(currentClass)) {

elm.className = currentClass

+ ((currentClass.length > 0) ? " " : "") + className;

}

return elm.className;

}

function removeClassName(elm, className) {

var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");

elm.className = elm.className.replace(classToRemove, "").replace(

/^\s+|\s+$/g, "");

return elm.className;

}

function makeTheTableHeadsHighlight() {

// get all the td's in the heart of the table... 

var table = document.getElementById('rockartists');

var tbody = table.getElementsByTagName('tbody');

var tbodytds = table.getElementsByTagName('td');

 

// and loop through them... 

for ( var i = 0; i < tbodytds.length; i++) {

 

// take note of their default class name 

tbodytds[i].oldClassName = tbodytds[i].className;

 

// when someone moves their mouse over one of those cells... 

tbodytds[i].onmouseover = function() {

 

// attach 'on' to the pointed cell 

addClassName(this, 'on');

 

// attach 'on' to the th in the thead with the same class name 

var topheading = getElementsByClassName(this.oldClassName,

'th', table);

addClassName(topheading[0], 'on');

 

// attach 'on' to the far left th in the same row as this cell 

var row = this.parentNode;

var rowheading = row.getElementsByTagName('th')[0];

addClassName(rowheading, 'on');

}

 

// ok, now when someone moves their mouse away, undo everything we just did. 

 

tbodytds[i].onmouseout = function() {

 

// remove 'on' from this cell 

removeClassName(this, 'on');

 

// remove 'on' from the th in the thead 

var topheading = getElementsByClassName(this.oldClassName,

'th', table);

removeClassName(topheading[0], 'on');

// remove 'on' to the far left th in the same row as this cell 

var row = this.parentNode;

var rowheading = row.getElementsByTagName('th')[0];

removeClassName(rowheading, 'on');

}

}

}

addLoadEvent(makeTheTableHeadsHighlight);

</script>

</head>

<body>

 

 

<div class="cssguycomments">

Final example with JavaScript applied. Hover over a table cell to see

effects. "View Source" and copy if you'd like to use.

</div>

<table id="rockartists">

<thead>

<tr>

<th class="null">

</th>

<th class="stones">

Rolling Stones

</th>

<th class="u2">

U2

</th>

<th class="crue">

M?tley Cr��e

</th>

</tr>

</thead>

<tbody>

<tr>

<th>

Lead Vocals

</th>

<td class="stones">

Mick Jagger

</td>

<td class="u2">

Bono

</td>

<td class="crue">

Vince Neil

</td>

</tr>

<tr>

<th>

Lead Guitar

</th>

<td class="stones">

Keith Richards

</td>

<td class="u2">

The Edge

</td>

<td class="crue">

Mick Mars

</td>

</tr>

<tr>

<th>

Bass Guitar

</th>

<td class="stones">

Ron Wood

</td>

<td class="u2">

Adam Clayton

</td>

<td class="crue">

Nikkie Sixx

</td>

</tr>

<tr>

<th>

Drums

</th>

<td class="stones">

Charlie Watts

</td>

<td class="u2">

Larry Mullen, Jr.

</td>

<td class="crue">

Tommy Lee

</td>

</tr>

</tbody>

</table>

</body>

</html>

分享到:
评论

相关推荐

    javascript实现网页中单击单元格背景变色特效

    javascript实现网页中单击单元格背景变色特效

    javascript万能table合并单元格,隐藏列 html版

    ### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时,我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如,在报表展示或者数据汇总...

    vue swipeCell滑动单元格(仿微信)的实现示例

    Vue SwipeCell 滑动单元格是 Vue.js 应用中一种常见的交互组件,它通常用于模拟微信等应用中的滑动操作,例如显示更多选项、删除等。在本示例中,我们将深入探讨如何实现这样的功能。 首先,我们来看一下核心的 ...

    table-rowspan表格自动合并单元格插件

    通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...

    JS 实现Table相同行的单元格自动合并示例代码

    在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...

    table行随鼠标移动变色示例

    本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能,帮助开发者创建更具视觉辨识度的数据展示表格。 首先,我们来看一下基本的HTML结构。在给出的示例中,一个简单的表格(`&lt;table&gt;`)被创建,包含了表头...

    jQuery仿Excel表格选中单元格变色特效

    在本文中,我们将深入探讨如何使用jQuery实现一个仿Excel表格的选中单元格变色特效。这个功能允许用户在网页上的表格中通过鼠标操作选择单个或多个单元格,同时改变选中单元格的背景颜色,以模拟Excel的交互体验。 ...

    鼠标滑动tab切换

    接着,我们引入jQuery库,并编写JavaScript代码来监听鼠标的滑动事件。当鼠标滑过tab时,我们使用jQuery的`.stop()`方法停止当前的动画,`.animate()`方法进行平滑过渡,切换到相应的tab内容。同时,需要更新tab的...

    鼠标经过文字变色

    综上所述,“鼠标经过文字变色”的功能可以通过多种方式实现,包括CSS和JavaScript,其中JavaScript提供了更强大的功能和更广泛的浏览器兼容性。对于现代Web开发而言,推荐使用JavaScript来实现这类动态效果,同时...

    HTML:鼠标滑动效果

    在探讨“HTML:鼠标滑动效果”这一主题时,我们主要关注的是如何通过HTML、CSS以及JavaScript技术,来实现网页上鼠标光标的动态变化,尤其是当鼠标悬停或滑过特定元素时,光标能够展现出诸如手型、指针等不同形态的...

    jQuery鼠标滑动切换焦点图代码.zip

    【jQuery鼠标滑动切换焦点图代码】是一种基于JavaScript库jQuery实现的动态图片展示技术,它通过用户的鼠标滑动事件来实现焦点图的自动切换,从而为网页增添视觉吸引力和交互性。这种技术常用于网站的首页、产品展示...

    javascript实现table单元格点击展开隐藏效果(实例代码)

    在Web开发中,使用JavaScript实现HTML表格(table)单元格的...以上就是使用JavaScript实现table单元格点击展开隐藏效果的知识点。通过理解和应用这些知识点,开发者可以创建出更加互动和用户友好的表格数据展示界面。

    ntab鼠标滑动js特效

    综上所述,"ntab鼠标滑动js特效"是通过JavaScript实现的一种交互式网页设计技术,通过监听鼠标滑动和点击事件来切换导航栏中的内容。在实际应用中,开发者需要考虑性能、兼容性和用户体验等因素,以达到最佳效果。

    javascript table 增加删除行,巧妙实现

    一个基本的表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`(数据单元格)组成。例如: ```html &lt;table&gt; 姓名 年龄 张三 &lt;td&gt;25 &lt;/table&gt; ``` 在JavaScript中,我们可以使用DOM操作来对...

    JQ滑动变色菜单_导航条变色滑动显示

    "JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...

    js实现表格变色(鼠标移动 选中变色)

    本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先,我们需要一个包含表格数据的HTML文件,例如`test2l.html`。在这个文件中,我们将创建一个带有复选框的表格。基本的HTML...

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    在本文中,我们将深入探讨如何在layui框架中...在layui中,我们可以灵活地自定义表格的列,将单元格设置为复选框,实现用户友好的交互。 首先,我们需要引入layui的CSS和JS文件。在HTML头部添加以下代码: ```html ...

    仿百度鼠标滑过 图片自动滑动分页

    5. **事件处理**:JavaScript中,需要监听鼠标的hover事件,当鼠标进入和离开滑动区域时,触发相应的图片切换函数。 6. **图片加载优化**:为了避免一次性加载所有图片导致页面加载速度慢,可以使用懒加载技术,...

    文字列表鼠标移动单元格渐变动画特效

    "文字列表鼠标移动单元格渐变动画特效"是一个典型的交互式设计案例,它结合了CSS3、JavaScript或者某些前端框架(如React, Vue等)的技术,为用户提供了一种动态的视觉体验。 首先,我们要理解“渐变动画”的概念。...

Global site tag (gtag.js) - Google Analytics