方式一：

        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. 黄聪：wordpress前台自定义用户，调用wp_editor上传附件提示【抱歉，出于安全的考虑,不支持此文件类型】错误。

    1.直接禁用文件类型检测,在wp-config.php文件中,添加这样一句代码define('ALLOW_UNFILTERED_UPLOADS', true); 2.在functions.php里面, ...

  2. Filter 过滤器

    1. config in web.xml 2. @Component 3. @WebFilter (filterName="LoginFilter", url-patterns= ...

  3. [Android Studio 1A] – 插件

    关于android studio插件的使用,一直没有好的机会来研究,最近项目开发中需要统计项目的代码行数,所以就需要一个代码统计的插件.我选择的是 Statistic,下载地址是:https://pl ...

  4. ADF_ADF Faces系列2_使用JSF开发基于Ajax的用户界面：ADF Faces富客户端组件简介（Part2）

    2013-05-01 Created By BaoXinjian

  5. NeHe OpenGL教程 第二十四课：扩展

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  6. UIView阴影和圆角的关系

    UIView阴影和圆角的关系   UIView 的 clipsToBounds属性和CALayer的setMasksToBounds属性表达的意思是一致的. 取值:BOOL(YES/NO) 作用:决定 ...

  7. Translate this app.config xml to code? (WCF) z

    http://stackoverflow.com/questions/730693/translate-this-app-config-xml-to-code-wcf <system.servi ...

  8. Jmeter-Maven-Plugin高级应用：Selecting Tests To Run

    地址:https://github.com/jmeter-maven-plugin/jmeter-maven-plugin/wiki/Advanced-Configuration Selecting ...

  9. 怎样查看oracle当前的连接数

    SQL> select count(*) from v$session #当前的连接数SQL> Select count(*) from v$session where status='A ...

  10. [ActionScript 3.0] flash如何访问父级或者舞台上的变量、函数等的方法

    方法一: 进行类型转换,先将root.parent强制转换为MovieClip类型,再进行使用,如下:MovieClip(root).i.MovieClip(this.parent).i.MovieC ...