<!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. java中关于File类的mkdirs()和FIle()构造方法在windows环境内网测试总结

    环境:环境是内网windows,传入路径的时候不带盘符,并且服务器的win10也不是超级管理员账户 关于File类的mkdirs()远程访问创建不了文件和路径的问题. 如果浏览器操作者是windows ...

  2. [tmux] Copy and paste text from a tmux session

    One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also ...

  3. nodejs版本号更新问题：express不是内部或外部命令

    版本号更新后,我们使用熟悉的npm install -g express命令安装,可是,成功安装之后竟然提示express不是内部或外部命令. nodejs小问题:[1]express不是内部或外部命 ...

  4. PHP数组foreach循环如何实现逆序访问？

    PHP数组foreach循环如何实现逆序访问? 一.总结 1.array_reverse($array) :foreach(array_reverse($array) as $key=>$val ...

  5. hdfs的基本原理和基本操作总结

    hdfs基本原理 Hadoop分布式文件系统(HDFS)被设计成适合执行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有非常多共同点. 但同一时候,它和 ...

  6. AlphaImageLoader用法

    在 IE6 中,能够非常方便地利用 img 的 src 属性,实现本地图片预览,然而在 IE7 中,这样的办法却行不通.须要用 AlphaImageLoader. AlphaImageLoader 说 ...

  7. [转]erlang ranch

    一. ranch app启动: ranch_sup -> ranch_server % 创建ets, 并提供接口给其他进程读写 二. 启动diy app (监听模块: 用ranch_tcp -& ...

  8. WPF 拼音输入法

    原文:WPF 拼音输入法 本文来告诉大家如何使用 WPF 来写一个输入法,使用的方式是钩子. 目录 键盘 解析键盘 获得按键 输入流向 算法 实际上本文是在使用一个好用的软件 希沃白板 的时候发现在里 ...

  9. 让ProgressDialog在setCancelable(false)时按返回键可dismiss

    最近发现Android4.0系统中ProgressDialog设置为setCancelable(true)时,点击ProgressDialog以外的区域也可以让ProgressDialog dismi ...

  10. HTML：描述语义

    一.HTML HTML:Hypertext Markup Launguage,超文本标记语言,是网页的就文件格式,用于描述网页语义. 二.HTML骨架 DTD手册:http://www.w3schoo ...