动态生成Table

最新推荐文章于 2024-07-16 14:17:54 发布
最新推荐文章于 2024-07-16 14:17:54 发布
阅读量191 收藏
点赞数
分类专栏： js 文章标签： J# .net
在http://topic.csdn.net/t/20030823/16/2180668.html找到的，将内容进行了整理，把有用的代码留下。

[color=red]manyou的代码：[/color] 

<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'



[color=red]manyou更正后的代码[/color] 

 <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>
iteye_4935
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element label动态赋值_动态表头生成
weixin_39947396的博客
11-30 3213
I'm only needed occasionally, but never important.工作中遇到的，整理总结一下。技术栈vue，ts，elementUI业务需求导入excel表单，导入成功后预览表单数据。根据表单首行字段，动态生成预览表单的表头。excel表单格式：实现页面布局，调用接口获取到excel表格中数据，存入fields中。<el-table :data...
动态创建表格
qq_64152659的博客
05-12 741
文章目录（一）html基本框架（二）css装饰（三）JavaScript实现动态创建表格 （一）html基本框架 <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 337
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
动态添加、删除table表格行和列
hao9101111的博客
12-22 2377
正常情况下要动态添加、删除表格的行和列，如果要牵扯到数据绑定等问题的话 会很复杂，但是我们可以把这个比较复杂的问题进行拆分，动态添加删除行和列，无非难点在于 怎么添加列 以及如何添加行，对于添加列逻辑可能稍显复杂 ，但是添加行倒是很简单，只需要往定义的 list里面push空的数据即可实现新增一条数据，那么如果添加列，其实我们可以仿照这个， 换个思路， 整体添加列要考虑 表头的设置 以及数据添加 数据绑定这些，但是我们可以把这些给分开，我们先添加表头 定义一个表格list 里面包含要添加表头的 n...
JavaScript动态创建table表格
weixin_54366356的博客
06-08 1989
平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐… 使用如下方法，直接调用即可生成table <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JQuery 动态生成Table表格实例代码
11-29
本实例将详细讲解如何使用jQuery的`append`和`appendto`方法来动态生成Table表格。 首先，让我们了解`append`和`appendto`这两个jQuery方法。`append`方法用于在匹配元素的末尾添加新的内容，而`appendto`则是相反...
JQuery Ajax动态生成Table表格
12-10
　本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。 目标： 　a 熟悉简单JQuery ...
jQuery ajax动态生成table功能示例
10-19
主要介绍了jQuery ajax动态生成table功能,结合具体实例形式分析了jQuery基于ajax数据交互动态创建table表格的相关操作技巧,需要的朋友可以参考下
html动态添加table行
10-12
实现自动添加table行，增删改查功能统一完成实现，统一提交
js动态创建table、读取table
weixin_39418164的博客
04-17 3368
创建：                                        var mytable = document.getElementById("mytable"); var mytr = ""; for(var i=0;i&lt;data.length;i++){ var tr = document.createElement("tr"); ...
JQuery 动态生成DIV、Table并处理数据,DWR与后台交互
09-28
// 绑定高度并获得当前隐藏keys（获得当前事件的下一个元素） /** * 显示状态和模块 */ /** * 隐藏状态和模块 */ /** * 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 */ /** * 验证 */
JS 动态增加table
09-19
动态的增加JSP页面的table,此代码可以动态增加此页面同类型的table
后台动态生成table表格
369540808
11-25 659
以前看到动态生成table的代码时,认为特别复杂,看到代码就不想看,认为这个用不到,而且还抱着一种难的心理. 不管则着,还是逃不过,躲避不是好的方法,这次就用到了动态生成表的要求,不学不行呀,不然页面达不到效果. 下面是我自己实现的一个实例 首先是在前台页面拖出一个html的table , 我们可以设定表头,也可不设定表头 这里我就自己设定表头了 &lt;html...
生成多行两列式列表（table实现）
weixin_30877493的博客
03-11 740
根据是奇数行还是偶数行来实现 StringBuilder builder = new StringBuilder(); builder.Append(string.Format("document.write(\"<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr>\");\n"))...
jQuery实现动态添加tr到table的方法
java_12138的博客
09-25 5277
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt;   &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; chars
在 Windows 上开发.NET MAUI 应用_1.安装开发环境
最新发布
huaqianzkh的专栏
07-16 693
开发跨平台的本机 .NET Multi-platform App UI (.NET MAUI) 应用需要 Visual Studio 2022 17.8 或更高版本，或者具有 .NET MAUI 扩展的最新 Visual Studio Code。如果是这样，请执行该操作，然后像往常一样启动 Visual Studio。例如，如果以前安装了 Visual Studio Community 2022，并且具有该版本的更新，则 Visual Studio 安装程序中将显示“有可用更新”消息。
js 循环动态生成table表格
04-29
可以使用 JavaScript 中的 DOM 操作来动态生成表格。以下是一个示例代码： ```html <!DOCTYPE html> 动态生成表格 <button onclick="createTable()">生成表格 <div id="tableContainer"></div> // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值