<!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. Uncaught SyntaxError: Unexpected end of input 解决办法

    Unexpected end of input  的英文意思是"意外的终止输入" 他通常表示我们浏览器在读取我们的js代码时,碰到了不可预知的错误,导致浏览器 无语进行下面的读取 ...

  2. MySQL key分区（五）

    具体描写叙述总结请看MySQL分区(一) 样例:该样例为本人个人学习总结分享->具体说明-->有问题欢迎前来交流

  3. SQL Server高速生成SQL增删改查语句

    你还在手写程序生成SQL语句吗?你还在为由于马虎出错的SQL语句而感到无语吗?你还在为不知如何表达复杂的SQL语句而纠结吗?假设你的回答为"是".那你就OUT啦.快来试试应用SQL ...

  4. ssh连接上腾讯云、华为云Linux服务器，一会就自动断开

    客户端向服务端发送心跳 依赖 ssh 客户端定时发送心跳,putty.SecureCRT.XShell 都有这个功能. Linux / Unix 下,编辑 ssh 配置文件: # vim /etc/s ...

  5. [ES2016] Check if an array contains an item using Array.prototype.includes

    We often want to check if an array includes a specific item. It's been common to do this with the Ar ...

  6. kettle的job中运行每行

     job中运行每行 有时,我们须要job或转换执行多次.且每次传入的參数都不同.假如你正在做数据迁移的工作,须要导入每天的旧数据,则须要一个job依据指定的日期导入数据,该日期被指定作为參数.假设 ...

  7. [搜索]Trie树的实现

    trie这种树也被称为线索,搜索树. 正如图 以下是用stl 的map来实现 class trie_item_c { public: trie_item_c(){} trie_item_c(const ...

  8. XMPP之安装mySQL--Mac OS（一）

    come from:http://www.cnblogs.com/xiaodao/archive/2013/04/04/2999426.html 一.安装 到MySQL官网上http://dev.my ...

  9. 【u242】排名系统

    Time Limit: 1 second Memory Limit: 64 MB [问题描述] F1的影响力越来越大,因此国际汽联决定扩大规模,让更多有天赋的车手加入这一行列. 不过规模的扩大带来了一 ...

  10. 【27.40%】【codeforces 599D】Spongebob and Squares

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...