方式一：

        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. python 虎扑注册检查脚本

    ulipad,看着蛮舒服的. 图里的代码就是今天晚上的成果. 突然就想看看python这个被很多人说是优雅的语言,于是晚上没事就配了配环境,做了个东西 #encoding: utf-8 import ...

  2. 在DataList、Repeater的HeaderTemplate和FooterTemplate模板中寻找控件FindControl

    [程序代码] <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> ...

  3. 如何判断TCP包是否发送成功

    1. TCP发送接口:send() TCP发送数据的接口有send,write,sendmsg.在系统内核中这些函数有一个统一的入口,即sock_sendmsg().由于TCP是可靠传输,所以对TCP ...

  4. poj 1011 Sticks

    Sticks Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 126238   Accepted: 29477 Descrip ...

  5. android的照片浏览器（一）至返回所有图片文件

    今天开始写android的照片浏览器 首先要解决的问题是要得到sdcard下面所有是图片的文件的目录 于是我先写了一个普通的java类 来得到后缀是.jpg,.bmp.png.jpeg的文件 pack ...

  6. OSTimeDelay（1）

    当OS_TICKS_PER_SEC=100HZ ,即每个时钟节拍10ms;如果想延时10ms而调用OSTimeDelay(1)是不行的,调用该函数至少要2个时钟节拍才不会因时间太短,调度跟不上而产生错 ...

  7. cvc-elt.1: 找不到元素 'beans' 的声明

    这次遇到的这个错误又坑爹又低级 , 是因为网上抄到了错误的xsd搞的. 这是网上抄到的 xsi:schemalocation=" http://www.springframework.org ...

  8. JQ获取当前是第几个元素，以及直接选取第几个元素的方法

    一.获取当前是第几个元素的方法使用:$(this).index() 实例: $(function () { $('.menu li').mouseover(function () { alert($( ...

  9. [Java] 过滤文件夹

    package test.file; import java.io.File; import java.io.FileFilter; /** * 过滤文件夹 * @author Frost.Yen * ...

  10. java利用过滤器实现编码的转换,内容输出的替换

    在页面建个表单 <form action="login.do" method="post"> <input type="text&q ...