<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. Creating a Swap Partition

    Creating a Swap Partition 1.   Use  fdisk /dev/vda  to open your disk in fdisk. (Use gdisk if you ar ...

  2. WIN7 64位上 MYSQL的ODBC一些个人理解

    最近电脑中毒了,无奈之下把32位的xp换成了64位的win7,无聊耗时的搭完开发环境,装了vs6.0(忽略掉一切的不兼容),装完64位的mysql(“mysql-5.6.10-winx64.zip”) ...

  3. win8发布 wcf问题

    WCF services don’t run on IIS 8 with the default configuration, because the webserver doesn’t know, ...

  4. 常用hash函数

    常用的哈希函数   通用的哈希函数库有下面这些混合了加法和一位操作的字符串哈希算法.下面的这些算法在用法和功能方面各有不同,但是都可以作为学习哈希算法的实现的例子.   1.RS  从Robert S ...

  5. 优化JavaScript脚本的性能

    循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差, ...

  6. PHP 过滤二维数组和三维数组

    <?php $arr = [ [1,3,5,7,9], [2,4,6,8,0] ]; $arr2 = [ 'list' => [ [1,3,5,7], [2,4,6,8], [3,2,9, ...

  7. delphi : 取得网页源码内容

    取得网页的源码内容的函数以及调用方法供大家参考: program geturl; uses wininet, windows; //取网页内容 function StrPas(const Str: P ...

  8. Oracle database启动过程分析

    实例跟数据库的区别 实例(instance)是内存中的一块区域和一组后台进程的集合.它的作用是维护数据库文件的.而数据库(database)则是指存放数据的数据库文件.它是一系列格式化的数据的集合.它 ...

  9. Ftp协议Socket实现

    原来用WebRequest来传输文件,被人鄙视了.就弄个Socket版的,支持Active,Passive模式. 带事件日志,有时间的人可以拿去做C#版的flashfxp. public class ...

  10. 周末献礼 MyVoix2.0.js 麦克风波形绘制(一)

    最近更新了之前发布的语音识别框架MyVoix,加入了麦克风的波形分析效果.没有看过MyVoix介绍的同学请猛戳(传送门) Github地址 在新的更新中,波形分析可以绑定麦克风源,也可以单独配合别的音 ...