<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. linux批量执行工具omnitty使用方法

    一.omnitty概述 在生产环境中,可能会有多台linux主机.运维人员可能会对多台主机进行同样的操作,例:同时在多台主机上添加一个user或查看所有主机的硬件信息,如果没有批量操作工具,设备少于2 ...

  2. （转）html5 Placeholder属性兼容IE6、7方法

    使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...

  3. GridView、Repeater获取当前行号

    GridView: <%# Container.DataItemIndex+1 %> Repeater:<%# Container.ItemIndex+1%>

  4. MyEclipse内存不足的问题

    今早打开MyEclipse莫名其妙弹出提示框,然后我各种搜索,用了网上能查到的各种办法去试图解决问题,方法包括但不限于  修改eclipse.ini .设置Default VM Arguments . ...

  5. Swift - 40 - 枚举更加灵活的使用方式

    //: Playground - noun: a place where people can play import UIKit /* 这里的枚举没有给它的成员默认值, 而是给它绑定了一个类型, 之 ...

  6. JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

    XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话.   大多数浏览的客户端JavaScri ...

  7. icon font

    简而言之,就是: 使用 特殊字符 + (使用@font-face)自定义的字体 来代替图片文件显示图标. 关于@font-face, 参考来自W3CPLUS 的详细解释: css3 @font-fac ...

  8. JDBC使用sql语句

    JDBC---连接数据库 java与数据库连接需要驱动,这个驱动则是JDBC,连接的时候需要ip+端口号+dbname 还要用户名和密码 改java文件的编码方式--在项目名点右键属性----把编码方 ...

  9. JNDI--Java命名和目录接口

    JNDI主要用于在容器中配置某些资源,让所有项目可以使用.JNDI可以提供: 1:数据库连接池.            自定义连接池             第三方连接池 Dbcp           ...

  10. GUI树组件，表格

    树组件首先要new一个JTree,再加结点,然后添加到 JScrollPane JTree tree1=new JTree(); //.......添加节点 add(new ScrollPane(tr ...