程序博客网 > 逸晗网络视频编辑

利用javascript动态创建表格

来源：互联网发布：逸晗网络视频编辑编辑：程序博客网时间：2024/05/19 03:27

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

效果图：

/*两个方法

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>

0 0

逸晗网络视频编辑

逸晗网络视频编辑

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子杭州ot价目表 2007款奇瑞a113参数灵媒by风书流呆百度网盘鸣人和纲手雏田轮流X 2019中文字幂乱码国产16y 页国产第110页一中文字幕乱码500页凯帕克中文字幕在线播放在哪里能看可岚和少校国产第1页浮力影日本中文字字幕76页博益网自考报名猪狗人ZOO 河南闹伴娘7分43视频视频加比勒加海盗1观看色酷影院首页日本不卡高清免v一道本挤奶徐州军用机场在哪刘玥的闺蜜底特律留学老司机网站-香蕉视频观看无限制版-成年轻人电影免费20岁化龙帝仙结局太惨了把性欧美第6 洪荒之吾乃人皇第八区真实录音第一页欧美萝莉uu3800 色花堂。徐州阳光幼教何爽俊凯梦莹父亲第8部全部章节 se01第九页亚124页 5678 大铭哥在线播放上海时时乐走势图_上海时时乐直播广东十一选五走势图_广东福彩快乐十分走势图 ts龚景旋第一视角在线主播大秀页国产ts大战直女亚偷乱图片小说体彩11选5_体彩11选5一天共多少期神医叶凡与安少宛