<style>        table{            width:500px;            font-weight: bold;            border: 1px solid #000;            border-collapse:collapse;            font-size:20px;            text-align:center;            margin: 0 auto;        }        td{            border: 1px solid #000000;        }

    </style>    <script>       window.onload=function () {            //创建一个数据        var json=[{name:'张X',age:29,sal:10000},            {name:'赵X',age:32,sal:15000},            {name:'总X',age:40,sal:20000}        ];         var arrname=['名称','年龄','工资'];        //动态创建table        var table=document.createElement('table');           //创建tr,td项           var tr=document.createElement('tr');           //创建文档片段//           var pool=document.createDocumentFragment();            for(var i=0;i<arrname.length;i++){                 var td=document.createElement('td');                td.innerHTML=arrname[i];//                pool.appendChild(td);                tr.appendChild(td);            }           table.appendChild(tr);

           for(var i=0;i<json.length;i++){               var newRow=table.insertRow();                var newcellname=newRow.insertCell(0);                newcellname.innerHTML=json[i].name;               var newcellname=newRow.insertCell(1);                newcellname.innerHTML=json[i].age;               var newcellname=newRow.insertCell(2);                newcellname.innerHTML=json[i].sal

           }

        //添加到body里面去        document.body.appendChild(table);       }

    </script></head><body>

</body>

js基础例子动态创建table实例的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  3. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  4. oaf 动态创建table vo (转)

    原文地址:如何动态创建table 需求: 因为系统中有几千个QA plan 但是不能手动创建几千个 质量收集页面所有需要根据 不同的plan 动态创建对应的 质量收集页面. 但是创建tabel 都要绑 ...

  5. 动态创建 Log4net 实例

    动态创建log4net 实例 根据业务类型,动态的创建日志实例,将日志写到不同目录.常见的配置文件中统一配置,不能满足需求. 引用log4net nuget安装命令: Install-Package ...

  6. JS动态创建table

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. .Net 中的反射(动态创建类型实例) - Part.4

    动态创建对象 在前面节中,我们先了解了反射,然后利用反射查看了类型信息,并学习了如何创建自定义特性,并利用反射来遍历它.可以说,前面三节,我们学习的都是反射是什么,在接下来的章节中,我们将学习反射可以 ...

  8. .Net 中的反射(动态创建类型实例)

    动态创建对象 在前面节中,我们先了解了反射,然后利用反射查看了类型信息,并学习了如何创建自定义特性,并利用反射来遍历它.可以说,前面三节,我们学习的都是反射是什么,在接下来的章节中,我们将学习反射可以 ...

  9. JS提交表单页面不跳转、JS下载、动态创建from

    JS下载 function downloadFile(id) {     var url =  "<%=request.getContextPath()%>/cer/downlo ...

随机推荐

  1. Freemarker常用技巧(二)

    1 list.break指令<#list sequence as item>  ...</#list>tem_index:当前变量的索引值.item_has_next:是否存在 ...

  2. python单元测试之unittest

    unittest是python标准库,从2.1开始就有. 标准的使用流程: 1:实现一个unittest.TestCase的子类 2:在其中定义以_test开头的实例函数 3:用unittest.ma ...

  3. ssh key报but this does not map back to the address – POSSIBLE BREAK-IN ATTEMPT!错误

    在/etc/hosts 文件加上对方的主机名  ip地址,可以ping通主机名即可.

  4. 学习OpenSeadragon之四(导航视图)

    OpenSeadragon介绍以及上手:学习OpenSeadragon之一 OpenSeadragon主要用于地图.医学图像等需要放大缩小分层显示的图像显示. 1.简单例子 导航视图就是在一个小框中显 ...

  5. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  6. SQL 把数据从一张表更新到另一张表

    代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅. UPDATE tb1 SET tb1.fieldOne = tb2.fieldOne /* 将原始表 ...

  7. Google Chrome一些小技巧

    document.body.contentEditable='true'; 可以编辑网页上的内容

  8. discuz 和 wordpress 整合注意问题

    要先在应用列表里添加自己本身的应用即要保证同步操作,本身也是一个应用,并保证通信成功: 应用和ucenter不在一个机器上,IP都要设定: discuz/uc_client/ 下要有一个接收数据的da ...

  9. Windows编程中的若干难点 - Windows程序设计（SDK）007

    Windows编程中的若干难点 让编程改变世界 Change the world by program 一个窗口的生与死 我记得有童鞋会问:如果我的程序需要在关闭前让用户判断是否确定要关闭窗口,我应该 ...

  10. MVC 使用AJAX POST上传图片的方式

    我们来总结一下使用AJAX以POST方式上传图片的方法. 一.普遍的一种是以file的格式请求.在Request.Files中获取文件. public ActionResult UploadFile( ...