<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. MegaCLI SAS RAID Management Tool

    MegaCLI SAS RAID Management Tool  Ver 8.04.08 July 05, 2012    (c)Copyright 2011, LSI Corporation, A ...

  2. 【转】大素数判断和素因子分解【miller-rabin和Pollard_rho算法】

    集训队有人提到这个算法,就学习一下,如果用到可以直接贴模板,例题:POJ 1811 转自:http://www.cnblogs.com/kuangbin/archive/2012/08/19/2646 ...

  3. spring02IOC

    1.创建所需要的Student 和 Grade实体类 public class Student { //学生实体类 private String name; //姓名 private Integer ...

  4. 从零基础入门JavaScript(2)

    在上次的学习当中,我已经对JavaScript有了一定基础上的理解,比如:JavaScript的发展史,JavaScript中变量的命名,各种运算符,以及数据的类型与它们之间的转化.还有就是一些最基本 ...

  5. 注意mysql中的编码格式和php中的编码格式一致

    今天发现用php代码插入英文可以,但是中文插入不进去,注意编码要一致,@mysql_connect("localhost","root","12345 ...

  6. java分布式开发,什么是分布式开发

    就是同一个服务,把数据库的不同部分分开建立到不同的服务器上.以缓解数据库大量数据访问的压力.很多大公司的业务量比较大,每天的访问量都达到几百万上千万,甚至上亿的访问量,在访问量不是很大的情况下,是可以 ...

  7. 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  8. 关于<%@ include file=" " %>与<jsp:include page=""></jsp:include>中的那些问题?

    今天在使用<%@ include file=" " %>指令时,竟然在页面中不让使用?这是怎么回事:问题如下图: 顿时被这个问题给搞到了!!!突然想到在以前的 JSP ...

  9. xdebug使用说明

    常用配置 xdebug.var_display_max_children整数类型,默认值128.用于控制通过xdebug_var_dump(),var_dump()方法时显示数组中子数组的个数或对象中 ...

  10. Linux 挂载iso,并设置为源

    ubuntu在安装lsb-core时需要从 /media/cdrom中查找源,无奈我机器的光驱被我换为硬盘了,无法安装光盘,只有在网上下载的iso文件在硬盘中,所以把iso挂载到它要查找位置 执行: ...