`

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>

分享到：
| 页面中的表格如何画斜线
评论
发表评论

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

相关推荐

    table鼠标经过时整行变色 jquery

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

    EXTJS单元格变色、行变色

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

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

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

    layui table合并单元格.zip

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

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

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

    javascript 万能table合并单元格 js版

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

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

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

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

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

    table合并单元格的多种方法

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

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

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

    table行随鼠标移动变色示例

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

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

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

    鼠标移动变色代码

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

    JSP Table 单元格合并

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

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

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

    鼠标经过文字变色

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

    HTML：鼠标滑动效果

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

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

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

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

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

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