利用javascript动态创建表格
//说明:实现功能、原理上文相同。不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能!
效果图:
/*两个方法
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动态创建表格的更多相关文章
- javascript动态创建表格:新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
- javascript 动态创建表格
<html> <head> <script> function createTable(rows,lines){ this.rows=rows; this.line ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- javascript动态添加表格以及获取数据
<script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'h ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- FineUIMvc随笔 - 动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...
- FineUIMvc随笔(1)动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
随机推荐
- 【ZJOI2016】小星星
题目描述 小Y是一个心灵手巧的女孩子,她喜欢手工制作一些小饰品.她有 $n$ 颗小星星,用 $m$ 条彩色的细线串了起来,每条细线连着两颗小星星.有一天她发现,她的饰品被破坏了,很多细线都被拆掉了.这 ...
- Maven依赖机制理解
假设一个项目需要用到日志组件Log4j,那么有如下方式添加这个组件. 一.传统方式: 1.访问官网https://logging.apache.org/log4j/2.x/download.html, ...
- Oracle 实例名/服务名 请问SID和Service_Name有什么区别
可以简单的这样理解:一个公司比喻成一台服务器,数据库是这个公司中的一个部门. 1.SID:一个数据库可以有多个实例(如RAC),SID是用来标识这个数据库内部每个实例的名字, 就好像一个部门里,每个人 ...
- Linux图形界面和文字界面的切换
Ctrl+Alt+F1~F6:切换到文字界面 登陆tty1~tty6终端, 运行等级为run level 3 Ctrl+Alt+F7 或者输入命令startX:切换到图形界面,运行等级为run lev ...
- Proftpd快速搭建FTP服务器
前言 在Linux系统中,FTP服务器软件有很多,都已经成熟,像vsftpd, wu-ftp, Pure-FTPd等.但这些软件安装配置起来都比较麻烦,搭建个人的FTP服务器,还是Proftpd比较简 ...
- mybatis表名反射实体
package com.eshore.wbtimer.executor.service.impl; import com.baomidou.mybatisplus.mapper.EntityWrapp ...
- css3 - 动态伪类
动态伪类分为以下几种: 1. hover(经过) 2. active(点击后) 3. focus(聚焦) - input专用 4. visited(访问后) 使用:
- C 标准库 - <stdarg.h>
C 标准库 - <stdarg.h> 简介 stdarg.h 头文件定义了一个变量类型 va_list 和三个宏,这三个宏可用于在参数个数未知(即参数个数可变)时获取函数中的参数. 可变参 ...
- 自己写的通过ADO操作mysql数据库
#include <iostream> #include <windows.h> #include <atlstr.h> #import "c:\Prog ...
- LoadRunner多负载产生器
Executive Summary : The following explains why it is necessary to have about 6 load generators when ...