在http://topic.csdn.net/t/20030823/16/2180668.html找到的，将内容进行了整理，把有用的代码留下。
manyou的代码：
<HTML>
<BODY>
<script>
hy = new Object();
// +----------------------------------------------------+
// | 创建表格类 |
// +----------------------------------------------------+
hy.cT = function()
{
var args, ot, rc, cc, i, j, rw, itd, _pa, as, xx, nn;
as = {'bgc':'bgcolor', 'bg':'backgorund', 'h':'height', 'cN':'className', 'oC':'onClick', 'style':'STYLE', 'oDC':'onDoubleClick', 'oMO':'onMouseOver', 'oMOu':'onMouseOut', 'oMD':'onMouseDown', 'oMU':'onMouseUp', 'w':'width', 'cp':'cellpadding', 'cs':'cellspacing', 'iH':'innerHTML', 'br':'border'}; //as::attributes初始化table,tr,td的所有属性列表
args = hy.cT.arguments; //得到参数列表
_pa = function(obj) //pa::public_attributes生成所有属性
{
var nm;
for (nm in xx) { //nm::name公用属性名称
eval('obj.' + nm + '=xx[nm]'); //为table,tr或td的属性赋值
}
if (xx['id']) obj.name = xx['id']; //为table,tr或td的name属性赋值
}
//建立一个表格对象
ot = document.createElement("TABLE");
//表格对象属性
xx = []; //清空数组
for (nn in args[0]) xx[(as[nn]==null?nn:as[nn])] = args[0][nn]; //执行完后xx数组的格式举例:xx['bgcolor'] = '#ffffaa'
if (!xx['cellpadding']) xx['cellpadding'] = '0';
if (!xx['cellspacing']) xx['cellspacing'] = '0';
if (!xx['border']) xx['border'] = '0';
if (!xx['width']) xx['width'] = '100%';
_pa(ot); //生成公用属性
if (args.length == 1) return; //如果参数只有一行,直接返回
rc = (args[0]['row']?args[0]['row']:1); //rc::row_count表格行数
if (rc) cc = (args.length-1-rc)/rc; //cc::colume_count表格列数
for (i=0; i<rc; i++) {
xx = []; //清空数组,以备下一个对象使用
rw = ot.insertRow(i); //建立一行
for (nn in args[(cc + 1)*i + 1]) xx[(as[nn]==null?nn:as[nn])] = args[(cc + 1)*i + 1][nn]; //执行完后xx数组的格式举例:xx['bgcolor'] = '#ffffaa'
_pa(rw); //生成公用属性
for (j=0; j<cc; j++) {
xx = [];
//建立一列
itd = rw.insertCell(j); //itd::insert_td::插入列
//TD对象属性
for (nn in args[(cc + 1)*i + 2 + j]) xx[(as[nn]==null?nn:as[nn])] = args[(cc + 1)*i + 2 + j][nn]; //执行完后xx数组的格式举例:xx['bgcolor'] = '#ffffaa'
if (!xx['width']) xx['width'] = '100%';
_pa(itd); //生成公用属性
}
}
return ot.outerHTML; //返回生成的表格字符串
};
//调用创建表格类
var str = hy.cT({'row':3, 'id':'aaa', 'w':'100%', 'br':'5', 'style':'border-color:#FF3300;', 'cp':'5', 'cs':'5', 'oC':'alert()'},
{'h':111, 'oC':'alert()', 'wwwwww':'asdfasdfasdf', 'id':'x'},
{'id':'www', 'w':136, 'cN':'hyIc2SCL', 'iH':'lsdjfsldkjf', 'bgc':'#6666FF'},
{'w':4, 'iH':'ph'},
{'id':'bbb', 'cN':'hyIc2SCR', 'iH':'<font color=#FF0066>恍恍惚惚含含糊糊</font>'},
{'h':1},
{'iH':'pcbch', 'on随口的':'asdfasdfasdf', 'onselectstart':'return false;', 'id':'qqqqq'},
{'iH':'pcvbxch','id':'xxx'},
{'iH':'pxvh','id':'www'},
{'h':1},
{'cN':'hyIc2SCLL', 'iH':'pxvh'},
{'iH':'pxcvh', '搜索':'脸色打击法'},
{'cN':'hyIc2SCRL', 'iH':'pxcvh'}
);
document.write(str);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var bbb = fso.CreateTextFile("d:/table.txt", true);
bbb.Write(str);
bbb.Close();
</script>
</BODY>
</HTML>
创建表格类createTable演示:
***直接调用:
------------------------------------------
1.调用的格式:
------------------------------------------
hy.createTable( {'row':3, 'id':'aaa', 'oC':'alert("这是table")'}, //table属性数组***注意必须设定属性row(行数)的值,下面的行数组个数与此行数对应***
{'h':35, 'id':'tr1', 'cN':'classtr'}, //第一行
{'id':'td1', 'w':'100%', 'iH':'<font>td1中的内容</font>'}, //第一行,第一列
{'id':'td2', 'w':'100%', 'iH':'<font>td2中的内容</font>'}, //第一行,第二列
{'id':'td3', 'w':'100%', 'iH':'<font>td3中的内容</font>'}, //第一行,第三列
{'h':35, 'id':'tr2', 'cN':'classtr'}, //第二行
{'id':'td1', 'w':'100%', 'iH':'<font>td1中的内容</font>'}, //第二行,第一列
{'id':'td2', 'w':'100%', 'iH':'<font>td2中的内容</font>'}, //第二行,第二列
{'id':'td3', 'w':'100%', 'iH':'<font>td3中的内容</font>'}, //第二行,第三列
{'h':35, 'id':'tr3', 'cN':'classtr'}, //第三行
{'id':'td1', 'w':'100%', 'iH':'<font>td1中的内容</font>'}, //第三行,第一列
{'id':'td2', 'w':'100%', 'iH':'<font>td2中的内容</font>'}, //第三行,第二列
{'id':'td3', 'w':'100%', 'iH':'<font>td3中的内容</font>'}, //第三行,第三列
);
以上是假设定义一个三行三列的表,那么第一个参数是table的属性数组(***注意必须设定属性row(行数)的值)('row':3表示表格有三行,'id':'aaa'表示表格的名字....)
第二个参数是第一行('h':35表示tr的高度是35,'id':'tr1'表示tr的id是tr1,'cN':'classtr'表示tr的样式名是classtr)
后面的三个参数是第一个tr的三列(如果是三行四列,那么这句话改为:后面的四个参数是第一个tr的四列. 其他类推)('id':'td1'表示td的id是td1,'w':'100%'表示td的宽度是100%,'iH':'<font>td1中的内容</font>'表示td的内容是<font>td1中的内容</font>)
再后面一个参数是第二行...
如果你定义的参数只有一行,那么函数生成像这样的字符串<table></table>后返回
------------------------------------------
2.调用举例:
------------------------------------------
------------------------------------------
3.属性祥解:
------------------------------------------
row::表格中的行数 默认值为1行
table,tr,td通用的属性:
1.bgc::bgcolor::背景色
2.bg::backgorund::背景图片
3.h::height::高度
4.cN::className::样式表调用
5.style::STYLE样式
6.id::ID或NAME
7.oMO::onMouseOver::鼠标移动
8.oMOu::onMouseOut::鼠标移出
9.oMD::onMouseDown::鼠标按下
10.oMU::onMouseUp::鼠标抬起
11.oC::onClick::鼠标单击
12.oDC::onDoubleClick::鼠标双击
table独有的属性:
1.br::border::默认值0
2.cp::cellpadding::默认值0
3.cs::cellspacing::默认值0
4.w::width::宽度默认值100%
td独有的属性:
1.iH::innerHTML::内容
2.w::width::宽度,默认值100%
3.align::对齐属性
另外除了以上已定义好的属性外, table,tr,td的属性可任意定制: 例如你可以为td添加一个属性aaa='bbb'
manyou更正后的代码
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
hy = new Object();
// +----------------------------------------------------+
// | 创建表格类 |
// +----------------------------------------------------+
hy.createTable = function()
{
var args, ot, rc, cc, i, j, rw, itd, _pa;
args = hy.createTable.arguments; //得到参数列表
_pa = function(obj, i) //pa::public_attributes生成公用属性
{
if (args[i]['bgc']) obj.bgcolor = args[i]['bgc'];
if (args[i]['bg']) obj.backgorund = args[i]['bg'];
if (args[i]['h']) obj.height = args[i]['h'];
if (args[i]['cN']) obj.className = args[i]['cN'];
if (args[i]['style']) obj.style = args[i]['style'];
if (args[i]['id']) obj.id = args[i]['id'];
if (args[i]['id']) obj.name = args[i]['id'];
if (args[i]['oC']) obj.onClick = args[i]['oC'];
if (args[i]['oDC']) obj.onDoubleClick = args[i]['oDC'];
if (args[i]['oMO']) obj.onMouseOver = args[i]['oMO'];
if (args[i]['oMOu']) obj.onMouseOut = args[i]['oMOu'];
if (args[i]['oMD']) obj.onMouseDown = args[i]['oMD'];
if (args[i]['oMU']) obj.onMouseUp = args[i]['oMU'];
}
//建立一个表格对象
ot = document.createElement("TABLE");
//表格对象属性
ot.border = (args[0]['br']?args[0]['br']:'0');
ot.cellpadding = (args[0]['cp']?args[0]['cp']:'0');
ot.cellspacing = (args[0]['cs']?args[0]['cs']:'0');
ot.width = ((args[0]['w'])?args[0]['w']:'100%');
_pa(ot, 0); //生成公用属性
rc = (args[0]['row']?args[0]['row']:1); //rc::row_count表格行数
cc = (args.length-1-rc)/rc; //cc::colume_count表格列数
for (i=0; i<rc; i++) {
rw = ot.insertRow(i); //建立一行
_pa(rw, (cc + 1)*i + 1); //生成公用属性
for (j=0; j<cc; j++) {
//建立一列
itd = rw.insertCell(j); //itd::insert_td::插入列
//TD对象属性
if (args[(cc + 1)*i + 2 + j]['iH']) itd.innerHTML = args[(cc + 1)*i + 2 + j]['iH'];
if (args[(cc + 1)*i + 2 + j]['align']) itd.align = args[(cc + 1)*i + 2 + j]['align']; //为innerHTML属性赋值
itd.width = (args[(cc + 1)*i + 2 + j]['w']?args[(cc + 1)*i + 2 + j]['w']:'100%'); //为宽度属性赋值
_pa(itd, (cc + 1)*i + 2 + j); //生成公用属性
}
}
return ot.outerHTML; //返回生成的表格字符串
};
//调用创建表格类
var str = hy.createTable({'row':3, 'id':'aaa', 'w':'100%', 'br':'1', 'cp':'0', 'oC':'alert()'},
{'h':111, 'oC':'alert()', 'id':'x'},
{'id':'www', 'w':136, 'cN':'hyIc2SCL', 'iH':'lsdjfsldkjf', 'bgc':'#6666FF'},
{'w':4, 'iH':'ph'},
{'id':'bbb', 'cN':'hyIc2SCR', 'iH':'<font color=#FF0066>恍恍惚惚含含糊糊</font>'},
{'h':1},
{'iH':'pcbch', 'id':'qqqqq'},
{'iH':'pcvbxch','id':'xxx'},
{'iH':'pxvh','id':'www'},
{'h':1},
{'cN':'hyIc2SCLL', 'iH':'pxvh'},
{'iH':'pxcvh'},
{'cN':'hyIc2SCRL', 'iH':'pxcvh'}
);
document.write(str);
</script>
</BODY>
</HTML>
分享到：
相关推荐
使用jquery，动态生成table表格，使用jquery.pagination.js来实现分页栏
javascript动态生成table及处理.
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>...
1.js动态生成table,对table的创建，添行，删行操作
js实现table分页可以动态生成table
JQ后台获取json数据动态生成table
用js加载json数据，然后用table显示。
javascript动态生成固定样式的table
spring4 MVC +maven + mysql数据库 + mybatis+根据后台json前台动态生成table 直接下载就可运行
本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。 目标： a 熟悉简单JQuery ...
主要介绍了jQuery ajax动态生成table功能,结合具体实例形式分析了jQuery基于ajax数据交互动态创建table表格的相关操作技巧,需要的朋友可以参考下
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
NULL 博文链接：https://guirudaoge.iteye.com/blog/1420635
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
要求能够实现给出任意带table表格的html文件，生成与表格相同内容的excel文件，附件可以作为测试文件，提供给定的roster.html文件，通过java代码，实现生成与html页面的table相同样式的roster.xls文件。
该小项目以编码形式实现了JaperReports的动态报表功能，以满足用户对报表的高度定制化。 使用该项目时的注意事项： 1.使用Eclipse导入该项目 2.下载JasperReports Library，将JasperReports的jar文件及其依赖jar...
动态生成table并实现分页在开发过程中时一个很好的应用，接下来本文也要实现一个类似效果，感兴趣的朋友可以参考下哈