<!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. .net下载优酷1080P视频

    事实上流程大致是:调用飞驴下载API+js解析+文件下载+调用flvBind合并这样一个流程而已_(:з」∠)_ 貌似是不用太多的说明..嗯.. 起先的需求是从优酷上下载一些视频 只是网络上的各种软件 ...

  2. HDOJ 2043 password

    刚開始看到这个题目的时候,就直接理解成仅仅要是长度符合要求而且字符符合要求,就是一个安全的password了,并没有考虑到至少要3种字符的组合.然后就直接写程序了(先暂且觉得题目就是那个意思),在測试 ...

  3. 探讨jsp相对路径和绝对路径

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79076768 问题:当在jsp使用相对路径引入其他js文件的时候,通过浏览器访问该页面一 ...

  4. Java高级个人笔记(RandomStringUtils工具类)

    //产生5位长度的随机字符串,中文环境下是乱码 RandomStringUtils.random(5); //使用指定的字符生成5位长度的随机字符串 RandomStringUtils.random( ...

  5. 浏览器jsp、html之间的关系

    浏览器html.jsp之间的关系 1.HTML能直接通过浏览器打开,而JSP仅仅能公布到Tomcatserver才干打开. 2.HTML中不能嵌套Java代码,而JSP中能够嵌套Java代码: 3.H ...

  6. [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda lib ...

  7. 前端Js框架汇总（工具多看）

    前端Js框架汇总(工具多看) 一.总结 一句话总结: 二.前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领 ...

  8. CSS知识总结之浏览器

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  9. NSUserDefaults：通常用来保存一些小巧的数据，如用户的用户名密码，或者是用户的使用习惯，如是否自动打开背景音乐等。

    1,NSUserDefaults通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等. 2,使用它的原因就是:代码简短,使用方便 3,使用方法如下: -(vo ...

  10. erlang app 文件

    http://hje.iteye.com/blog/1211734 应用的概念¶ 当我们写了实现特定功能的代码之后,我们可能想将代码转成一个 应用 (application),这是可以作为一个单元启动 ...