javascript实现的具有EXCEL功能的table

最新推荐文章于 2024-02-18 08:47:52 发布

vfp_system

最新推荐文章于 2024-02-18 08:47:52 发布

阅读量2.7k

点赞数

分类专栏： IT技术文章标签： javascript excel function distance button stylesheet

本文链接：https://blog.csdn.net/vfp_system/article/details/5885958

版权

IT技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用JAVASCRIPT实现了table的单元格合并、拆分，初步具备了EXCEL表格的功能。在网上搜了很多代码，都没有做到真正的单元格合并，要么就是代码的实现方式有问题，我对这些代码进行了整合与修改，形成了可以初步应用于项目的table操作，包括新增行、新增列、单元格合并、合并后的单元格拆分、对要合并的单元格进行是否能进行合并的校验等功能。目前已经在IE 7.0 FireFox 3.6.3下测试通过。

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <mce:style type="text/css" rel="stylesheet"></mce:style><style type="text/css" rel="stylesheet" mce_bogus="1"> .tds { border-collapse:collapse; border-color:#C6D8F0; border-style:solid; border-width:thin; } </style> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <table border="1" cellpadding="0" cellspacing="0" width="95%"> <tr> <td> <input id="addNewRow" type="button" value="新增行" οnclick="mertable.addRow();" /> <input id="addNewCol" type="button" value="新增列" οnclick="mertable.addCols();"/> <input id="mergerCells" type="button" value="合并单元格" onclick = "mertable.MergeCells()"/> <input id="splitCells" type="button" value="拆分单元格" onclick = "mertable.SplitCells()" /> <input id="deleteRow" type="button" value="删除行" onclick = "mertable.deleteRow()"/> <input id="deleteCol" type="button" value="删除列" onclick = "mertable.deleteCols()"/> <input id="save" type="button" value="保存" οnclick="mertable.SaveTable()"/></td> </tr> <tr> <td> <table id="designer" class=tds cellpadding=2 cellspacing=2> <tbody id="designerBody"></tbody> </table> </td> </tr> </table> <mce:script language="javascript"></mce:script> </div> </form> </body> </html>

运行后的效果图如下：