方式一：

        var data =

            [

                { id: 1, name: "first", age: 12 },

                { id: 2, name: "second", age: 13 },

                { id: 3, name: "three", age: 12 },

                { id: 4, name: "fore", age: 13 },

             ];

        //原始的创建表格方式

        window.onload=function()

        {

            var tableAdd = document.createElement("table")

            tableAdd.id = "table1";

            tableAdd.className = "table1";

            document.getElementById("divTest").appendChild(tableAdd);

            for(var i=0;i<data.length;i++)

            {

                var rowData = data[i];

                var newRow = document.createElement("tr");

                tableAdd.appendChild(newRow);

                var newCol0 = document.createElement("td");

                newRow.appendChild(newCol0);

                var checkBox = document.createElement("input");

                checkBox.type = "checkbox";

                newCol0.appendChild(checkBox);

                var newCol = document.createElement("td");

                //双标签有inner属性，表示可以设置内容

                newCol.innerHTML = rowData.id;

                newRow.appendChild(newCol);

                var newCol2 = document.createElement("td");

                //双标签有inner属性，表示可以设置内容

                newCol2.innerHTML = rowData.name;

                newRow.appendChild(newCol2);

                var newCol3 = document.createElement("td");

                //双标签有inner属性，表示可以设置内容

                newCol3.innerHTML = rowData.age;

                newRow.appendChild(newCol3);

            }

            var lastRow = document.createElement("tr");

            tableAdd.appendChild(lastRow);

            var lasttd1 = document.createElement("td");

            lasttd1.colSpan = 4;

            lasttd1.innerHTML = "<input type='checkbox'/>  全选  <a href='#'>删除</a>";

            lastRow.appendChild(lasttd1);

        }

    </script>

</head>

<body>

    <div id="divTest" style="border:1px solid #ffd800; width:1000px;height:1200px;">

    </div>

</body>

</html>

效果图如下：

方式二：

 <style type="text/css">

        .table1

        {

            border:1px solid #00ff21;

            width:200px;

            height:200px;

            margin:10px auto;  /*margin 设置 auto可以使居中显示*/

            border-collapse:collapse; /*将td之间的空隙合并*/

        }

        .table1 td

        {

            border:1px solid #00ff21;

            padding:4px;

        }

        .chk{

        }

    </style>

    <script type="text/javascript" language="JavaScript">

        //只有表格才有的创建方式

        window.onload = function () {

            var tableAdd = document.createElement("table")

            tableAdd.id = "table1";

            tableAdd.className = "table1";

            document.getElementById("divTest").appendChild(tableAdd);

            for (var i = 0; i < data.length; i++) {

                var rowData = data[i];

                var newRow = tableAdd.insertRow(-1);//-1表示在表格最后追加一行，参数代表要插入行的位置

                newRow.insertCell(-1).innerHTML = "<input type='checkbox' class='chk'/>";

                var newCol = newRow.insertCell(-1);//单元格已经添加导航中，并且返回单元格引用

                //innerHTML是设置双标签的内容字符串，并且会自动解析HTML

                newCol.innerHTML = rowData.id;

                newRow.insertCell(-1).innerHTML = rowData.name;

                newRow.insertCell(-1).innerHTML = rowData.age;

            }

            var lastRow = tableAdd.insertRow(-1);

            var lastCol = lastRow.insertCell(-1);

            lastCol.colSpan = 4;

            lastCol.innerHTML = "<input type='checkbox' id='checkAll'/> 全选 <a href='javascript:del()'>删除</a>";

            document.getElementById("checkAll").onclick = allCheck;

        }

        /*实现全选*/

        function allCheck()

        {

            var res = document.getElementById("checkAll").checked;

            var chks = document.getElementsByClassName("chk");

            for(var i=0;i<chks.length;i++)

            {

                //为所有复选框的选中状态赋值：把全选复选框的选中状态设置给他们

                chks[i].checked = res;

            }

        }

        /*实现删除*/

        function del()

        {

            var chks = document.getElementsByClassName("chk");

            for(var i=0;i<chks.length;i++)

            {

                var chk = chks[i];

                if(chk.checked)

                {

                    //获取复选框所在的行对象

                    var trObj = chk.parentNode.parentElement;

                    //通过行对象的父元素 删除行对象   因为删除只能通过父元素来删

                    trObj.parentElement.removeChild(trObj);

                }

            }

        }

        var data =

            [

                { id: 1, name: "first", age: 12 },

                { id: 2, name: "second", age: 13 },

                { id: 3, name: "three", age: 12 },

                { id: 4, name: "fore", age: 13 },

             ];

效果图如下：

JavaScript创建表格的两种方式的更多相关文章

  1. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

  2. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  3. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  4. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  5. 创建TabHost的两种方式的简单分析

    最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTa ...

  6. 创建线程的两种方式比较Thread VS Runnable

    1.首先来说说创建线程的两种方式 一种方式是继承Thread类,并重写run()方法 public class MyThread extends Thread{ @Override public vo ...

  7. ubuntu创建用户的两种方式

    ubuntu创建用户有两种方式: useradd和adduser 这两者,就像零件与产品的关系.useradd是DIY,需要自己调配,adduser是品牌机,拿来就能用. 对于创建一般用户来讲,use ...

  8. Spring创建JobDetail的两种方式

    一.Spring创建JobDetail的两种方式 二.整合方式一示例步骤 1.将spring核心jar包.quartz.jar和Spring-context-support.jar导入类路径. 2.编 ...

  9. Java并发基础01. 传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

随机推荐

  1. Android Gradle实用技巧——APK文件名中加上SVN版本号，日期等

    有时候,我们会希望能把APK文件名上带上打包日期,打包时svn的版本号,应用版本号等.当然这些也可以手动添加,但是手动的话也未免太不优雅了,而且可能会出错. 利用Gradle,我们可以让打包出来的ap ...

  2. Top 6 Programming Languages for Mobile App Development

    Mobile application development industry in the last five years have multiplied in leaps and bounds, ...

  3. UVA 272 TEX Quotes

    TEX Quotes 题意: 变引号. 题解: 要想进步,真的要看一本好书,紫书P45 代码: #include<stdio.h> int main() { int c,q=1; whil ...

  4. CF 219D Choosing Capital for Treeland 树形DP 好题

    一个国家,有n座城市,编号为1~n,有n-1条有向边 如果不考虑边的有向性,这n个城市刚好构成一棵树 现在国王要在这n个城市中选择一个作为首都 要求:从首都可以到达这个国家的任何一个城市(边是有向的) ...

  5. wamp

    安装好wamp,但是图片没有变绿,大部分原因是80端口被占用. 修改端口号:可以从文件httpd.conf 将# Change this to Listen on specific IP addres ...

  6. Windows服务程序和安装程序制作

    转:http://www.cr173.com/html/15350_1.html 本文介绍了如何用C#创建.安装.启动.监控.卸载简单的Windows Service 的内容步骤和注意事项. 一.创建 ...

  7. bug_ _java.lang.IllegalArgumentException: View not attached to window manager

    ============= 1   view not attached to window manager 转自:http://hi.baidu.com/spare_h/blog/item/7fa3e ...

  8. 转_Java中常用的设计模式总结

    1.工厂模式:客户类和工厂类分开.消费者任何时候需要某种产品,只需向工厂请求即可.消费者无须修改就可以接纳新产品.缺点是当产品修改时,工厂类也要做相应的修改.如:如何创建及如何向客户端提供. 2.建造 ...

  9. JAVA数据类型自动转换，与强制转换

    一.数据类型自动转换 public class Test{ public static void main(String[] args){ int a = 1; double b = 1.5; dou ...

  10. filter的执行顺序

    一直没有仔细去研究下filter ,最近系统的测试了下: 先看代码吧 FirstFilter.java ================== package com.test.filter; impo ...