<!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. C# datatable增加行(datarow)数据为另一个datatable中某行

    两个表A和B,两表结构相同.现在需要将A表中部分行拷贝到B表中,直接用 DataTableB.rows.add(dataTableA.rows[0]) 这样的方法式会报"row已经属于A表& ...

  2. arcengine 开发经典帖 【强烈推荐仔细研读】

    转自原文 arcengine 开发经典帖 使用ArcGIS Engine 开发自定义GIS应用: 第一部分:使用ArcGIS Engine 发布自定义GIS应用软件-全面了解ArcGIS Engine ...

  3. sql for xml 还有一种写法（採用 tag 与 union all，简洁易懂）

    sql for xml 还有一种写法(採用 tag 与 union all,简洁易懂) 測试环境:sql 08, 08 R2, 2010,  2012, 2014 等 declare @agent t ...

  4. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  5. Go语言：正則表達式的使用

    Go语言的正則表達式使用非常easy.演示样例代码: package test import ( "fmt" "regexp" ) func RegixBase ...

  6. HDU 5044 Tree（树链剖分）

    HDU 5044 Tree field=problem&key=2014+ACM%2FICPC+Asia+Regional+Shanghai+Online&source=1&s ...

  7. .net core 下的分布式事务锁

    原文:.net core 下的分布式事务锁 目录 系统分布式锁的用法 锁的实现 锁的使用 API内的范例: 引用链接 系统分布式锁的用法 公司框架新增功能分布式锁: 锁的性能之王: 缓存 > Z ...

  8. 【SAE 部署 JavaWeb 项目报 404 错误】

    个人学习整理,如有不足之处,请不吝不吝赐教.转载请注明:@CSU-Max 今天写了一个小的 JavaWeb 项目传到 SAE 上.訪问的时候出错. 本地測试是正常的,并且曾经做微信平台开发的时候上传的 ...

  9. 手动删除APP里面的账号信息

    在Archive项目时,出现了“Your build settings specify a provisioning profile with the UUID “”, however, no suc ...

  10. iOS项目中所有icon的尺寸以及命名

    一般icon以下几个: Icon.png – 57×57 iPhone (ios5/6) Icon@2x.png – 114×114 iPhone Retina (ios5/6) Icon-72.pn ...