`

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实现网页中单击单元格背景变色特效

    table鼠标经过时整行变色 jquery

    在网页设计中，表格（Table）是一种常见的数据展示方式，jQuery 是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停（mouseover）到表格某一行时，实现整行颜色变化...

    EXTJS单元格变色、行变色

    EXTJS单元格变色、行变色实现方法详解 EXTJS是一个功能强大且流行的JavaScript框架，用于构建复杂的Web应用程序。其中，Grid Panel是EXTJS中最常用的组件之一，用于展示和编辑数据。本文将详细介绍EXTJS实现单元格...

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

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

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

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

    layui table合并单元格.zip

    在layui中，我们可以利用表格的`render`方法渲染数据，并通过JavaScript逻辑判断哪些单元格需要合并。通常，这涉及到对数据源的分析，找出需要合并的行或列。例如，如果连续几行有相同的数据，那么它们对应的单元格...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...

    javascript 万能table合并单元格 js版

    只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574

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

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

    table行随鼠标移动变色示例

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

    JS TABLE CELL 相同内容 单元格 合并

    Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能...

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

    《jQuery仿Excel表格选中单元格变色特效详解》 在网页开发中，有时我们需要创建类似Excel的功能，比如用户能够选择表格中的单元格，并且选中的单元格有明显的视觉反馈，例如变色。jQuery作为一款强大的JavaScript库...

    table合并单元格的多种方法

    在表格（Table）设计中，有时我们需要合并单元格来达到特定的展示效果，例如创建标题行或列，或者为了美观和布局对齐。在HTML、CSS以及JavaScript中，都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...

    将HtmlTable 导出为Execl文件，支持合并单元格、合并行，无需Office支持

    本项目提供了一个解决方案，它支持合并单元格和合并行，无需依赖Microsoft Office，这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说，具有很高的实用价值。 首先，我们要理解HTML表格...

    基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件.zip

    基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端...

    解决layui-table单元格编辑只能text问题

    总的来说，解决layui-table单元格编辑只能text的问题，需要对layui-table的API有深入理解，并结合layui的其他组件，通过JavaScript编程实现自定义编辑功能。这样的扩展不仅丰富了表格的功能，也提高了用户体验，使得...

    鼠标移动变色代码

    ### 鼠标移动变色代码详解：HTML与JavaScript结合实现动态效果 在网页设计中，为提升用户体验和页面互动性，开发人员常利用HTML、CSS及JavaScript来创建各种动态效果。本文将深入解析一段“鼠标移动变色代码”，...

    JSP Table 单元格合并

    ### JSP Table 单元格合并 在网页开发中，表格是展示数据的重要方式之一。为了使表格看起来更简洁明了，在某些情况下我们需要对相同的单元格进行合并处理。本篇文章将详细探讨如何在 JSP（JavaServer Pages）环境中...

    鼠标调整的table单元格宽和高

    样式可以自己修改，主要是运用JavaScript调整行高和列宽

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