本文是对上一篇博文的扩展，用js书写表格，并添加和删除数据，详细代码解释见代码页。

对于文中使用的script脚本函数，下载地址如下：https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ

页面效果如图：

          

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>动态创建元素（表格）</title>

         <script src="common.js" type="text/javascript" charset="utf-8"></script>

     </head>

     <body>

         <!-- 纯JS代码创建表格 -->

         <script type="text/javascript">

             var body=document.getElementsByTagName('body');

             //1.创建盒子作为表格容器,控制表格的位置

             var box=document.createElement('div');

             body[0].appendChild(box);

             //2.创建表格,并与box绑定

             var table=document.createElement('table');

             box.appendChild(table);

             //设置表格样式

             table.style.width='400px';

             table.style.border='1px solid gray';

             table.style.borderCollapse='collapse';

             //3.创建表头,并与table绑定

             var thead=document.createElement('thead');

             table.appendChild(thead);

             //定义表头的行,与表头绑定

             var tr=document.createElement('tr');

             thead.appendChild(tr);

             //4.创建表体,并与table绑定

             var tbody=document.createElement('tbody');

             table.appendChild(tbody);

             //建立模拟数据,模拟数据是一个个存在数组中的对象

             var dates=[

                 {name:'李世民',subject:'语文',score:98},

                 {name:'赵匡胤',subject:'物理',score:99},

                 {name:'多尔衮',subject:'数学',score:92},

                 {name:'嬴政',subject:'英语',score:93},

                 {name:'玄烨',subject:'体育',score:100},

                 {name:'刘彻',subject:'地理',score:94},

                 {name:'刘邦',subject:'历史',score:97},

                 {name:'曹操',subject:'音乐',score:91},

                 {name:'刘备',subject:'政治',score:100},

                 {name:'孙权',subject:'化学',score:90}

             ];

             //建立表头数据,在数组中存放

             var headDates=['姓名','科目','成绩','操作'];

             //5.表头数据的添加

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

                 //定义表头行的列

                 var td=document.createElement('td');

                 td.style.border='1px solid gray';

                 td.style.textAlign='center';

                 td.style.backgroundColor='lightgray';

                 td.style.height='40px';

                 tr.appendChild(td);

                 //设置表头行中列的内容

                 setInnerText(td,headDates[i]);

             }

             //6.表体数据的添加

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

                 var date=dates[i];

                 //创建表体数据的行与表体绑定

                 var tr=document.createElement('tr');

                 tbody.appendChild(tr);

                 for(var key in date){

                     //创建表体行中的列

                     var td=document.createElement('td');

                     td.style.border='1px solid gray';

                     td.style.textAlign='center';

                     tr.appendChild(td);

                     setInnerText(td,date[key]);

                 }

                 //创建删除列

                 var link=document.createElement('a');

                 link.href='javascript:void(0)';

                 setInnerText(link,'删除');

                 var td=document.createElement('td');

                 td.style.border='1px solid gray';

                 td.appendChild(link);

                 td.style.textAlign='center';

                 tr.appendChild(td);

                 //给删除列注册事件

                 link.onclick=deleteData;

             }

             function deleteData(){

                 var tr=this.parentNode.parentNode;

                 tbody.removeChild(tr);

                 return;

             }

         </script>

     </body>

 </html>

JavaScript--动态添加元素（纯js书写table并删除数据）的更多相关文章

  1. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  2. 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）

    一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...

  3. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  4. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  5. js 多选选择删除数据

    按了顶上的删除(多项删除) 单列复选框删除 js语句 <a href="javascript:delOne('${customer.id}')">删除</a> ...

  6. (笔记)Mysql命令drop table：删除数据表

    drop table命令用于删除数据表. drop table命令格式:drop table <表名>; 例如,删除表名为 MyClass 的表:    mysql> drop ta ...

  7. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  8. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

  9. 使用C#或javascript将Table里的数据导出到Excel

    原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...

随机推荐

  1. 如何才能快速入门python3？

    一些朋友自学python过程中,发现书也能看懂,书上的玩具代码也能看懂,但为啥自己不能做习题,不能写代码解决问题,自己不能动手写代码? 原因是初学者没有学会计算思维.解决问题的方法.编程思路. 编程思 ...

  2. JQuery和html+css实现鼠标点击放烟花

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

  3. MongoDB学习之mongoose

    MongoDB介绍: MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换 ...

  4. 面向对象设计之------Is-A(继承关系)、Has-A(合成关系，组合关系)和Use-A(依赖关系)(转)

    原文url:http://blog.csdn.net/loveyou128144/article/details/4749576 @Is-A,Has-A,Use-A则是用来描述类与类之间关系的.简单的 ...

  5. Laravel 单元测试-模拟认证的用户

    在 Laravel 编写单元测试时经常会遇到需要模拟认证用户的时候,比如新建文章.创建订单等,那么在 Laravel unit test 中如何来实现呢? 官方解决方法 Laravel 的官方文档中的 ...

  6. htmlunit模拟登录

    htmlunit jar项目路径http://sourceforge.net/projects/htmlunit/files/htmlunit/ demo代码如下 public class AutoL ...

  7. android Listview 软引用SoftReference异步加载图片

    首先说一下,android系统加载大量图片系统内存溢出的3中解决方法: (1)从网络或本地加载图片的时候,只加载缩略图.这个方法的确能够少占用不少内存,可是它的致命的缺点就是,因为加载的是缩略图,所以 ...

  8. TCP的建立和关闭

    一.TCP头信息 简单的至少应该知道,源端口,目的端口,序号,确认号,标志位,校验和 二.TCP的建立 1.客户端将SYN标志位置1,同时生成随机的序号,确认号是0. 2.服务器接收到SYN,知道有人 ...

  9. [原]Android打包之Eclipse打包

    Android自动打包流程详细图: 步骤一: 在工程中新建一个build.xml. 步骤二: 给工程配置ant工具. 选择ant工具的步骤如下: Windows->Shown view-> ...

  10. Python：运算与循环

    1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...