<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        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');
                if (i % 2 == 0) {
                    tr.style.backgroundColor = 'yellow';
                } else {
                    tr.style.backgroundColor = 'lightBlue';
                }
                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.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  2. js生成有缩进的表格

    项目中用到用了两天时间想到的,记录下来,如有更好的方法,留言给我,谢谢! js做如下表格: json [{"id":302,"serviceId":15,&qu ...

  3. js随机生成验证码及其颜色

    今天迎来了2018年第一场雪,这个美好的日子,总的写点什么纪念一下,在这里写了一个在js中使用Math.random()函数,随机生成四位数的验证码及其验证码换颜色. js代码如下: var arra ...

  4. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  5. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  6. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  7. JS生成二维码，允许中文转码

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  8. JS生成二维码，支持中文字符

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  9. Color.js增强你对颜色的控制

    往逝之因 不要低头,皇冠会掉...  可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...

随机推荐

  1. php课程 4-16 数组自定义函数（php数组->桶）

    php课程 4-16  数组自定义函数(php数组->桶) 一.总结 一句话总结:php的数组储存机制,和桶排序完美的结合.所以php的操作中多想多桶的操作. 二.数组自定义函数 1.相关知识 ...

  2. 百度echart--Uncaught Error: Component series.wordCloud not exists. Load it first.

    百度echart--Uncaught Error: Component series.wordCloud not exists. Load it first. 一.总结 一句话总结:关注报的错.可以通 ...

  3. [转] Valgrind使用

    http://www.cnblogs.com/napoleon_liu/articles/2001802.html 调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www. ...

  4. Linux下iptables屏蔽IP和端口号

    http://blog.csdn.net/kobejayandy/article/details/24332597 iptables 屏蔽端口

  5. github push出错（1）You can't push to git:// Use https://

    fatal: remote error: You can't push to git://github.com/niexiaobo/remote.git Use https://github.com/ ...

  6. TensorFlow 实战（四）—— tensor 的认识

    tensorflow,即是 tensor flows,在 computation graph 中 flows(流动)的不是别人,正是 tensor: 1. tensor 基本属性 tensor 的名字 ...

  7. Ubuntu server使用命令行上板VPNclient

    Ubuntu server使用命令行上板VPNclient VPN,虚拟专用网络,这个技术还是非常有用的.近期笔者參与的项目中就使用上了VPN,大概情况是这种.有两个开发团队,在异地,代码服务器在深圳 ...

  8. win10 uwp 线程池

    原文:win10 uwp 线程池 如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何在 UWP 使用线程池,本文 ...

  9. zxl2431 指向函数的指针

    (一) 用函数指针变量调用函数 可以用指针变量指向整形变量.字符串.数组.结构体.也可以指向一个函数.一个函数在编译时被分配一个入口地址.这个入口地址就称为函数指针.可以用一个指针变量指向函数,然后通 ...

  10. uva 11552 Fewest Flops 线性dp

    // uva 11552 Fewest Flops // // 二维线性dp // // 首先,在该块必须是相同的来信.首先记录每块有很多种书 // 称为是counts[i]; // // 订购f[i ...