动态Web表格

最新推荐文章于 2025-06-20 09:00:00 发布

原创最新推荐文章于 2025-06-20 09:00:00 发布 · 704 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#web #function #null #table #javascript #button

Web 专栏收录该内容

101 篇文章

订阅专栏

本文介绍了一个使用JavaScript创建动态表格的控件实现方法，包括表格的创建、填充数据及单元格操作等功能，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控件代码：

function Table() { var _objTbl = null,_oTBody = null; var _n = null; var _r = null; var _c = null; // 创建表格元素 this.Create = function(n,r,c) { _r = (null == r) ? 1 : r; _c = (null == c) ? 1 : c; _n = (null == n) ? "nTbl" : n; _objTbl = document.createElement("TABLE"); _oTBody = document.createElement("TBODY"); _objTbl.id = _n; _objTbl.style.border="1px solid blue"; // 表格(table)样式 for(i=0;i<_r;i++) { this.CreateRow(i); } _objTbl.appendChild(_oTBody); return _objTbl; } // 创建表格的行 this.CreateRow = function(rownum) { var n = _n + "_tr_" + rownum.toString(); var objRow = document.createElement("TR"); objRow.id = n; _oTBody.appendChild(objRow); for(j=0;j<_c;j++) { this.CreateCell(objRow,i,j); } } // 创建表格的列 this.CreateCell = function(objRow,rownum,cellnum) { var n = _n + "_tr_"+ rownum + "_td_" + cellnum.toString(); var objCell = document.createElement("TD"); objCell.id = n; objCell.title = n; objCell.innerText = _n + "=" + rownum + " , " + cellnum; // 设置单元格里的值 objCell.style.border="1px solid gray";// 单元格(td)样式 // 表格操作事件 //objCell.onclick = function(){var obj = new Table(); obj.DeleteRow(_n,rownum);}; objCell.onclick = function(){var obj = new Table(); obj.DeleteCell(_n,rownum,cellnum);}; objRow.appendChild(objCell); } // 删除单元格所在的行 this.DeleteRow = function(tblname,rownum) { if((null == rownum) || (null == tblname)) return; var cellname = tblname + "_tr_" + rownum.toString() var obj = $(cellname); var objBody = obj.parentNode; objBody.removeChild(obj); } // 删除单元格所在的列 this.DeleteCell = function(tblname,rownum,cellnum) { if((null == rownum) || (null == cellnum) || (null == tblname)) return; var cellname = tblname + "_tr_"+ rownum + "_td_" + cellnum.toString(); var objcell = $(cellname); var objBody = objcell.parentNode.parentNode; var objTable = objBody.parentNode; var x = objTable.rows.length; for(i=objTable.rows.length; i > 0; i--) { var r = i-1; var row = $(tblname + "_tr_"+ r.toString()); var cell = $(tblname + "_tr_"+ r + "_td_" + cellnum.toString()); row.removeChild(cell); } } // 填充表格数据 this.SetDate = function(v) { if(null == v) return; for(i = 0; i < v.length; i++) { //_objTbl.rows[i].cells[3].innerText.innerText = v[i].CompName; _objTbl.rows[i].cells[1].innerText = v[i].CompName; _objTbl.rows[i].cells[2].innerText = v[i].CompAddr; } } } function $(id) { return document.getElementById(id); }

测试：

<html> <head> <title> Create Table </title> <mce:script language="javascript" type="text/javascript" src ="Table.js"></mce:script> </head> <mce:script language="JavaScript"></mce:script> <body> <div id="Container" style="border:1px solid red" mce_style="border:1px solid red"></div> <input type="button" value="创建表格" onclick="Create()" /> <input type="button" value="打印表格" onclick="Print()" /> </body> </html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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