JavaScript实现表格动态变色

本文实例为大家分享了JavaScript实现表格动态变色的具体代码，供大家参考，具体内容如下

表格分为：表头、表格主体 两部分

当移动到表格主体的行时，移动到哪一行，哪一行就变化颜色，区分我们选中的行数，更明显的看到选中了哪一行

实现思路

1、获取表格主体的所有行
2、css定义一个背景颜色类
for循环遍历，将每行都分别绑定onmouseover、onmouseout事件，
onmouseover（鼠标经过）- - - 该行类名赋值定义好的背景颜色类名
onmouseout（鼠标离开）- - - 该行类名赋值空

注意：这里不用排他思想，用排他思想，鼠标离开的最后的一行会有颜色

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格动态变色</title>
    <style>
        th {
            background-color: pink;
        }

        .bg {
            background-color: green;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="8" cellspacing="0" align="center">
        <thead>
            <tr>
                <th>水果</th>
                <th>喜欢程度</th>
                <th>季节</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>苹果</td>
                <td>☆☆☆☆☆</td>
                <td>四季</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>☆☆☆</td>
                <td>四季</td>
            </tr>
            <tr>
                <td>葡萄</td>
                <td>☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>榴莲</td>
                <td>☆☆☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>芒果</td>
                <td>☆☆☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
            <tr>
                <td>西瓜</td>
                <td>☆☆☆☆☆</td>
                <td>夏季</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tr = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function() {
                /* 排他算法
                for (var i = 0; i < tr.length; i++) {
                    tr[i].className = '';
                } */
                this.className = 'bg';
            }
            tr[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

页面效果：

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

赞 (0)

相关推荐

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • 用JS控制表格的逐行变色的表单

    优点: 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.) 3.用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器 友好度良好的表格 *{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • 高效的表格行背景隔行变色及选定高亮的JS代码

    这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前

  • javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

    // 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables(                     Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数                     Kin_Table_Header_Offset, //从

  • JS控制表格隔行变色

    <table width="800" border="0" cellpadding="0" cellspacing="0">    <tr>        <td>不变色</td>    </tr>    <tbody id="goaler">    <tr>        <td>xxxxxxxx</td

  • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin

  • js兼容标准的表格变色效果

    <!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/xhtml"> <head> <meta http-equiv="Content-

随机推荐