<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var bgColor;
        onload = function () {
            var list = [
            { id: '1', country: '中国', capital: '北京' },
            { id: '2', country: '美国', capital: '华盛顿' },
            { id: '3', country: '日本', capital: '东京' },
            { id: '4', country: '韩国', capital: '首尔' }
            ];

            var body = document.getElementsByTagName('body')[0];
            var table = document.createElement('table');
            table.border = '1px solid red';
            body.appendChild(table);

            var thead = document.createElement('thead');
            table.appendChild(thead);

            var item0 = list[0];
            
            for (var key in item0) {
                var tdh = document.createElement('td');
                tdh.innerHTML = key;
                thead.appendChild(tdh);
               
            }

            for (var i = 0; i < list.length; i++) {
                var tr = document.createElement('tr');
                tr.onmouseover = function () {
                    bgColor = this.style.backgroundColor;//存储颜色
                    this.style.backgroundColor = 'yellow';
                };
                tr.onmouseleave =function(){
                    this.style.backgroundColor = bgColor;
                };
                table.appendChild(tr);
                var item = list[i];
                for (var key in item) {
                    var td = document.createElement('td');
                    td.innerHTML = item[key];
                    tr.appendChild(td);
                }
            }
        }
    </script>
</head>
<body>

</body>
</html>

js 指向表格行变色，离开恢复的更多相关文章

  1. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  2. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  3. Jquery实现点击表格行变色！

    时隔一年左右,学习了新的知识,从尝试Linux部署项目,网络安全,至后端开发,然后用起了Jquery, 而且是必须要做.也让自己见识可能会更广泛一些.对于一个刚毕业的大学生而言.方正我是没有用过jqu ...

  4. js实现表格行的动态加入------Day56

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/36752655 现代页面通常都是用div+ ...

  5. js 操作表格行数的删减

    沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...

  6. js控制表格隔行变色

    只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...

  7. DOM操作--表格点击行变色

    点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...

  8. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  9. CSS3的nth-child() 选择器，表格奇偶行变色

    nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...

随机推荐

  1. 远程登录DSM，显示“您没有权限使用本项服务？

    远程登录DSM,显示“您没有权限使用本项服务?” https://www.chiphell.com/thread-825297-1-1.html 有可能你单位用的是多wan接入.一般synology不 ...

  2. CreateFeature与CreateFeatureBuffer区别

    转自原文CreateFeature与CreateFeatureBuffer区别 CreateFeature主要用于插入一条数据,CreateFeatureBuffer住哟啊用于插入多条数据,详细说明见 ...

  3. Quartz.NET 3.0.7 + MySql 实现动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(一)

    原文:Quartz.NET 3.0.7 + MySql 实现动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(一) 前端时间,接到领导任务,写了一个调度框架.今天决定把心路历程记 ...

  4. request与response对象详述

    request与response对象. 1. request代表请求对象 response代表的响应对象. 学习它们我们可以操作http请求与响应. 2.request,response体系结构. 在 ...

  5. 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——（5）有趣的指针

    一.指针是C语言的灵魂 # include <stdio.h> int main(){ int *p; //p是变量名,int *表示p变量存放的是int类型变量的地址,p是一个指针变量 ...

  6. Install .NET Core SDK on Linux CentOS / Oracle x64 | .NET

    原文:Install .NET Core SDK on Linux CentOS / Oracle x64 | .NET Linux发行版  CentOS / Oracle添加dotnet产品Feed ...

  7. Android自定义控件View（三）组合控件

    不少人应该见过小米手机系统音量控制UI,一个圆形带动画效果的音量加减UI,效果很好看.它是怎么实现的呢?这篇博客来揭开它的神秘面纱.先上效果图 相信很多人都知道Android自定义控件的三种方式,An ...

  8. NOIP 模拟 路径求和 - Tarjan+dfs+码

    题目大意: 各一个奇环内向森林,求每两个点对间的距离之和.无法到达则距离为-1. 分析: 首先Tarjan找出size大于1的连通分量(环),环中的边的贡献可以单独计算. 然后从入度为0的点向内dfs ...

  9. 《图说VR》——HTC Vive控制器按键事件解耦使用

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53915229 作者:car ...

  10. 新技能 get —— Python 断点续传下载文件

    from urllib.request import urlretrieve import sys import os prev_reported_download_percent = None # ...