//说明：实现功能、原理上文相同。不过这次是利用已有的简单的方法创建行和列，并实现内容行鼠标移入变色功能！

效果图：

/*两个方法

1、  trNode  table.insertRow(-1)    利用已创建的表格对象创建一行，返回值为该行的dom对象

2   tdNode trNode.insertCell(-1)    利用已经创建的行对象创建一列，返回值为该列的dom对象

*/

//实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>动态创建表格</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

        <style type="text/css">

          caption {

                padding: 0 0 5px 0;

                width: 450px;

                font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

                text-align: right;

                }

        td {

            border:1px solid #c1dad7;   

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

            text-align: center;

            width:150px;

            }

        .thead{

        background-color:#cae8ea;

        }

        </style>

        <script type="text/javascript">

        onload=function(){

            var jsons=[{name:"andy",age:20,gender:"male"},{name:"xiao",age:23,gender:"female"}];//json数组

            

            var table=document.createElement('table');//创建表

            var caption=document.createElement('caption');//创建标题

            caption.innerHTML='学生信息表';//设置标题的内容

            table.appendChild(caption);//将标题加入table

            

            var tHead=table.insertRow(-1);//创建首行

            for(var tHeadContent in jsons[0]){//循环遍历json数组中的第一值，获取每个json对象的键名

                tHead.insertCell(-1).innerHTML=tHeadContent;

            }

            tHead.className='thead';//设置第一行（即列名所在行）所引用的样式名称

            

            for(var i=0;i<jsons.length;i++){//循环遍历json数组

                var tr=table.insertRow(-1);//创建一行

                for(var item in jsons[i]){                

                    var td=tr.insertCell(-1);//每循环一次就创建创建一列

                    td.innerHTML=jsons[i][item];//设置该列的列值    

                }

                    tr.onmouseover=function(){//为每行添加鼠标移入事件

                        this.style.backgroundColor='#8aeebb';

                    };

                    tr.onmouseout=function(){//为每行添加鼠标离开事件

                    this.style.backgroundColor="";

                    };

            }

        

            var body=document.getElementsByTagName('body')[0];//获取body对象

            body.appendChild(table);//将table数组加入到body中

        }

        </script>

    </head>

    <body>

    </body>

</html>

利用javascript动态创建表格的更多相关文章

  1. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  2. javascript 动态创建表格

    <html> <head> <script> function createTable(rows,lines){ this.rows=rows; this.line ...

  3. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  4. jquery利用appendTo动态创建元素

    动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...

  5. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. javascript动态添加表格以及获取数据

    <script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...

  7. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  8. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  9. FineUIMvc随笔（1）动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

随机推荐

  1. vue常用指命

    1.v-text:用于更新标签包含的文本,作用和{{}}的效果一样. 2.v-html:绑定一些包含html代码的数据在视图上. 3.v-show:用来控制元素的display属性,和显示隐藏有关.v ...

  2. 天啦噜！原来Chrome自带的开发者工具还能这么用！

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/22665710来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Chrome自带开发者工具. ...

  3. 深入理解Activity启动流程(二)–Activity启动相关类的类图

    本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 在介绍Activity的详细启动流程之前,先 ...

  4. CCNP路由实验之十二 MPLS

     个.第3个数据包„„同样的操作.包含查询路由表.重写MAC地址,CRC校验等. 系列路由器.或者12000系列路由器. Netflow switching 通过一种标准的交换机制,处理了流的第一 ...

  5. ActiveMQ测试工具

    1. 测试工具 目前使用两种测试工具进行压力测试 1. Jmeter 测试单客户端收发多主题,测试高并发,大数据量时的接收效率 2. emqtt_benchmark测试多客户端收发主题,测试高吞吐量下 ...

  6. CAM350 10.5移动和叠层的用法

    1.快捷键 EC复制                                       IMO测量最近距离                             UZ放大,缩小尺寸 UC拷 ...

  7. PCB中地线和电源线的布线规则

    电源. 地线的布置考虑不周到而引起干扰,使产品的性能下降,严重时会降低产品的成功率.要把电源线和地线处理好,将电源线和地线所产生的噪音干扰降到最低限度,以保证产品的质量.一.电源线和地线的布线规则1) ...

  8. 宜信开源|分布式任务调度平台SIA-TASK的架构设计与运行流程

    一.分布式任务调度的背景 无论是互联网应用或者企业级应用,都充斥着大量的批处理任务.我们常常需要一些任务调度系统来帮助解决问题.随着微服务化架构的逐步演进,单体架构逐渐演变为分布式.微服务架构.在此背 ...

  9. ListView的异步载入（笔记，多线程和AsyncTask)

    异步载入最经常使用的两种方式: 多线程,线程池     AsyncTask 实例操作: 从一个站点上获取Json数据.然后将数据在ListView上显示. 1.创建item_layout布局 , 改动 ...

  10. Core Data 版本号迁移经验总结

    大家在学习和使用Core Data过程中,第一次进行版本号迁移的经历一定是记忆犹新,至少我是这种,XD.弄的不好,就会搞出一些因为迁移过程中数据模型出错导致的Crash.这里总结了一下Core Dat ...