方式一：

        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. php没有开启Memcache扩展类时

    模拟PHP Memcache 类.当服务器没有开启Memcache扩展的时候.可以采用本类使用方法class_exists('Memcache') or include './Memcache.cla ...

  2. POJ3318--Matrix Multiplication 随机化算法

    Description You are given three n × n matrices A, B and C. Does the equation A × B = C hold true? In ...

  3. solace

    最近做了一个关于solace的项目,有时间来总结一下 1>. solace 介绍 2>. solace 应用(C#)

  4. c# 甘蔗斗地主1.4存档修改器

           using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat ...

  5. CF 445A 简单DP

    今天早上找一道题的bug,还是找不出来,下午刷了几道水题,晚上准备回家的事, 然后本来想打CF的,一看,数学场,不打了. 这道题的题意: 给出一个序列,每次你可以从这个序列里面选择一个数ak,删除,然 ...

  6. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

  7. Visual Studio 2012 比较好用的插件推荐

    为了高效率的开发,下面笔者推荐几款非常不错的插件,方便大家.   以上控件的安装方式是: 然后通过联网的方式下载,安装后,需要重启一下Visual Studio方可使用.

  8. 转-android 支付宝SDK集成

    http://blog.csdn.net/kroclin/article/details/40746779 一.前言 最近做的项目刚好要集成支付宝,上网找了很多资料,介绍得感觉不是很全面,所以我经过这 ...

  9. laravel5.2 移植到新服务器上除了“/”路由 ,其它路由对应的页面显示报404错误（Object not found!）———新装的LAMP没有加载Rewrite模块

    Laravel 框架通过 public/.htaccess 文件来让网址不需要 index.php.如果你的服务器是使用 Apache,请确认是否有开启 mod_rewrite 模块.如果 Larav ...

  10. setInterval()和setTimeout()的区别

    一.setInterval()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具 ...