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

效果图：

/*两个方法

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. Xamarin XAML语言教程XAML文件结构与解析XAML

    Xamarin XAML语言教程XAML文件结构与解析XAML XAML文件结构 在上文中,我们创建XAML文件后,会看到类似图1.16所示的结构 图1.16  结构 其中,.xaml文件和.xaml ...

  2. LightOj 1215 Finding LCM

    Discription LCM is an abbreviation used for Least Common Multiple in Mathematics. We say LCM (a, b, ...

  3. InnoDB: Warning: a long semaphore wait 解决办法

    http://blog.csdn.net/wulantian/article/details/37560849

  4. Nginx图片防盗链的方式

    原文:http://www.open-open.com/code/view/1430750263460 location ~* \.(gif|jpg|jpeg|png|ico)$ { valid_re ...

  5. ubuntu navicat for mysql破解

    ubuntu navicat for mysql破解 ubuntu navicat for mysql只能试用14天. 破解方法:rm -rf /home/cxg/.navicat64/

  6. angular md-toast 颜色

    How to show md-toast with background color https://codepen.io/neilkalman/pen/jWBqve <div ng-contr ...

  7. NYOJ 38 布线问题_(解法1 Kruskal算法)

    时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 南阳理工学院要进行用电线路改造.如今校长要求设计师设计出一种布线方式,该布线方式须要满足下面条件: 1.把全部的楼都供 ...

  8. weblogic的几点配置

    2.在tomcat下写过滤器以后还有的地方需要手工转码<-->weglobic下也不用 eg:SubjectAction.java3.weblogic下anltr.jar有冲突,需要从外界 ...

  9. js增加收藏

    <html> <span style="white-space:pre"> </span><head> <span style ...

  10. 现成Android 5.0系统源代码

    让Android融入我的生活! 写Android一段时间了,每次看到网上一些大牛的博客.分析Android底层Zygote启动.Activity启动.View的绘制过程.SurfaceFlinger. ...