<html>

<head>

    <title></title>

    <style>

        table{

            width:800px;

            border-collapse:collapse;

            border:1px solid #9BC2E0;

        }

        table td,th{

            width:120px;

            height:30px;

            font-size:13px;

            border:1px solid #9BC2E0;

        }

        tr.even{

            background:red;

        }

        tr.odd{

            background:blue;

        }

    </style>

    <script>

        window.onload = function createTable(){

            var table = document.getElementById('tableId');

            var tbody = document.createElement('tbody');

            var k = 0;

            //创建表格

            for(var i = 0;i < 25;i ++){

                var tr = document.createElement('tr');

                for(var j = 0;j < 5;j ++){

                    var td = document.createElement('td');

                    var text = document.createTextNode(k ++);

                    td.appendChild(text);

                    tr.appendChild(td);

                }

                tbody.appendChild(tr);

            }

            table.appendChild(tbody);

            //隔N=3行换色，其中不包括首行

            var trs = table.getElementsByTagName('tr');

            for(var i = 1,len = trs.length;i < len;i ++){

                /*if(i&1){

                    trs[i].className ='even';

                }else{

                    trs[i].className = 'odd';

                }*/

                var j = parseInt((i - 1)/3);//隔N行

                if(j&1){

                    trs[i].style.backgroundColor='#0f0';

                }else{

                    trs[i].style.backgroundColor='#f00';

                }

            }

    　　　　//事件委托
            table.onclick = function(e){
                //ie与firefox获取事件不同
                var event = e || window.event;
                var td = event.target || event.srcElement;
                if(td.tagName === 'TD'){
                    alert(td.innerHTML);
                }
            };            

        }

    </script>

</head>

<body>

    <table id="tableId">

        <thead>

            <tr>

                <th>head 1</th>

                <th>head 2</th>

                <th>head 3</th>

                <th>head 4</th>

                <th>head 5</th>

            </tr>

        </thead>

    </table>

    </body>

</html>

备注：关于创建表格的方式的另一种写法（提升性能）：

          var table = document.getElementById('tableId');
            var tbody = document.createElement('tbody');
            var k = 0;
            //创建表格
            //createDocumentFragment:创建文档碎片节点
            var tbodydf = document.createDocumentFragment();
            var trdf = document.createDocumentFragment();
            for(var i = 0;i < 25;i ++){
                var tr = document.createElement('tr');
                for(var j = 0;j < 5;j ++){
                    var td = document.createElement('td');
                    var text = document.createTextNode(k ++);
                    td.appendChild(text);
                    trdf.appendChild(td);
                }
                tr.appendChild(trdf);
                tbodydf.appendChild(tr);
            }
            tbody.appendChild(tbodydf);
            table.appendChild(tbody);

使用JS创建表格以及隔行换色（包括隔N行换色）的更多相关文章

  1. （转）用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

  2. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  3. js创建表格

    js创建一个表格,其中的表头已经有了,要从json中读取的数据一行一行地创建表格 function create_table(data){ tableNode = document.getElemen ...

  4. JS创建表格完整

    <!DOCTYPE> <html> <head> <meta charset=utf-8 /> <title>动态表格</title& ...

  5. Java 在Word创建表格

    表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在Word ...

  6. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  7. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  8. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  9. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. IOS UI 笔记整理回顾

    注意手势会冒泡上抛,一个view没有实现的手势,如果父类view有实现,父视图就处理,如果不想让父视图处理,就把本视图添加到底层window上 setMasksToBounds:YES imageVi ...

  2. (转)数据库SQL优化大总结之 百万级数据库优化方案

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...

  3. [GeekBand] STL与泛型编程(2)

    本篇文章在上一篇文章的基础上进一步介绍一些常用的容器以及STL的一些深入知识. 一. Stack和Queue 栈和队列是非常常用的两种数据结构,由deque适配而来.关于数据结构的知识这里就不在介绍了 ...

  4. CAF（C++ actor framework）使用随笔（同步发送 异步与同步等待）（三）

    c). 同步发送, 等待响应, 超时后收到1个系统消息. 贴上代码 #include <iostream> #include "caf/all.hpp" #includ ...

  5. python mysqldb使用dictcursor

    python在使用MySQLdb库的时候,如下方法默认获取的cursor的结果集是tuple结构的. con = MySQLdb.connect('host',port,'username','pas ...

  6. 3月3日(2) Search Insert Position

    这题...有点简单吧,为什么只有34%的通过率? 题目意思简单说就是查找index,或者按升序插入的未知,WA一次,罪过,下次要特别注意程序里变量的变化,提交前用样例检查. 简单的我有点不好意思贴代码 ...

  7. JS 框架

    <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Untitled Page</title& ...

  8. SQL SERVER 遇到Unable to find the requested .Net Framework Data Provider. It may not be installed. (System.Data)

    今天新装的SQLSERVER 2012 EXPRESS 用于客户端程序 安装完成后打开登陆SQLSERVER 一切正常 当查看表定义.视图结构时,弹出一下内容 Unable to find the r ...

  9. 初试集群虚拟化搭建（二）—— Xen, kvm, OpenStack, VMware ESXi, Citrix XenServer等种种选择

    小伙伴们找到了一些主流方案的资料,最终选择了XenServer6.5作为平台搭建. Xen 特点: 功能强大,支持Linux的各种发行版本 通常是在现有Linux操作系统上安装,是一种半虚拟化的安装方 ...

  10. 【NetOffice Excel】Excel合并单元格【原】

    CSharp操作Excel采用开源的原生.NET程序集NetOffice,格式兼容性更好. 在操作Excel的时候有时候需要合并单元格 using ExcelOffice = NetOffice.Ex ...