方式一：

        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. HtmlParser + HttpClient 实现爬虫

    简易爬虫的实现 HttpClient 提供了便利的 HTTP 协议访问,使得我们可以很容易的得到某个网页的源码并保存在本地:HtmlParser 提供了如此简便灵巧的类库,可以从网页中便捷的提取出指向 ...

  2. 如何写出小而清晰的函数？（JS 版）

    本文以 JavaScript 为例,介绍了该如何优化函数,使函数清晰易读,且更加高效稳定. 软件的复杂度一直在持续增长.代码质量对于保证应用的可靠性.易扩展性非常重要. 然而,几乎每一个开发者,包括我 ...

  3. about_并查集

    前天刚学了并查集,挺好用的,虽然我现在只会用它来解决是不是亲戚啊,是不是朋友啊,带权并查集还不是很理解. 并查集也叫做不相交集合,主要有3个操作,初始化,查找,合并. 并查集其中一个很大的应用就是kr ...

  4. HTML5列表、块、布局

    一.列表 <ol>  无序列表  (每项前有.) <ul>  有序列表   (每项前有编号1,,2,3) <li>   列表项 <ul type=" ...

  5. 图片--android 图片占用内存与什么有关

    原文链接:http://blog.csdn.net/zjl5211314/article/details/7041813 在开发手机应用的时候,内存是有限的,那使用的时候,就要合理的运用和释放. 那么 ...

  6. hadoop对于压缩文件的支持及算法优缺点

    hadoop对于压缩文件的支持及算法优缺点   hadoop对于压缩格式的是透明识别,我们的MapReduce任务的执行是透明的,hadoop能够自动为我们 将压缩的文件解压,而不用我们去关心. 如果 ...

  7. JAVA 匿名对象

    /* 匿名对象: 没有名字的对象 匿名对象的使用方式之一: 当对对象方法只调用一次时,我们可以用匿名对象来完成,比较简化. 匿名对象的使用方式之二: 匿名对象可以被当做实参传递 */ class Ca ...

  8. ThinkPHP连接sql server数据库

    亲身经历,在网上找连接sql server数据库的方法,还是不好找的,大多数都是照抄一个人的,而这个人的又写的不全,呵呵,先介绍一下我连接的方法吧.如果你是用THINKPHP连接,那么最重要的就是配置 ...

  9. ubuntu 格式化U盘，并制作系统镜像

    1. 先要卸载U盘,使用如下命令: #umount /dev/sdb1 注意:/dev/后面的设备要根据你的实际情况而定,否则后面格式化,丢失数据!! 格式化U盘,并建立vfat文件系统 #mkfs. ...

  10. mysql 用户权限设置【转】

    在Linux下phpStudy集成开发环境中,要先进入mysql下bin目录,执行mysql ./mysql -u root -p 1.创建新用户 通过root用户登录之后创建 >> gr ...