在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>
分享到：
相关推荐
在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`<table>`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。本文将深入分析一个具体的示例，该示例...
本实例将详细讲解如何使用jQuery的`append`和`appendto`方法来动态生成Table表格。 首先，让我们了解`append`和`appendto`这两个jQuery方法。`append`方法用于在匹配元素的末尾添加新的内容，而`appendto`则是相反...
在JavaScript中，动态生成table是一种常见的网页交互功能，它允许我们根据需求在页面上实时创建、添加或删除表格行（tr）和单元格（td）。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...
在本例中，我们的目标是动态生成一个table表格。首先，HTML中需要有一个表格结构，但初始时不包含任何数据。我们使用jQuery选择器获取这个表格，并在AJAX请求成功后，将服务器返回的数据插入到表格中。假设服务器...
javascript动态生成固定样式的table
当我们需要从后台获取数据并动态地展示在前端表格（table）上时，jQuery和JSON的结合就显得尤为重要。本篇文章将深入探讨如何使用jQuery从后台获取JSON数据，并动态生成HTML表格。 首先，理解JSON数据结构至关重要...
在JavaScript（JS）开发中，动态地从JSON（JavaScript Object Notation）数据中读取信息并将其呈现到HTML表格（table）中是一项常见的任务。JSON因其简洁、易读且易于处理的特性，常用于存储和交换结构化数据。在这...
总结一下，实现JavaScript动态分页表格的关键步骤包括： 1. 创建HTML结构，包括表格和分页导航。 2. 在JavaScript中处理数据分页逻辑，包括计算总页数、显示指定页数据和处理分页按钮事件。 3. 获取数据，可能是从...
标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素，特别是DIV和Table，并且处理其中的数据。这在Web开发中非常常见，尤其是在构建交互式用户界面时。下面将详细阐述这...
在JavaScript编程中，根据数组数据进行分组并动态生成表格是一项常见的需求，特别是在Web开发中。这个场景通常出现在数据展示、报表生成或者数据分析的应用中。本文将深入探讨如何使用JavaScript实现这一功能，尤其...
本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。 目标： a 熟悉简单JQuery ...
在本项目中，我们主要探讨的是如何利用Spring4 MVC、Maven、MySQL数据库、MyBatis框架以及前端JSON数据来动态生成表格。这是一个常见的Web应用开发模式，它可以帮助开发者快速构建数据驱动的Web应用程序。 首先，...
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
本文实例讲述了jQuery ajax动态生成table的方法。分享给大家供大家参考，具体如下： $(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", dataType: "json", url:"<%=basePath%>...
要求能够实现给出任意带table表格的html文件，生成与表格相同内容的excel文件，附件可以作为测试文件，提供给定的roster.html文件，通过java代码，实现生成与html页面的table相同样式的roster.xls文件。
动态添加Table表格可以提供灵活的数据展示方式，适应不同场景和数据量的变化。本示例将详细介绍如何在ASP.NET后台使用C#语言来实现动态添加表格的功能。 首先，我们需要了解动态创建表格的基本步骤： 1. **创建...
这个技巧不仅适用于填充表格，还可以应用于其他需要动态生成或更新DOM内容的场景。结合jQuery的相关专题学习，如jQuery表格操作、JSON数据处理、表单操作等，可以进一步提升开发效率和代码质量。