JS生成表格,合并单元格
来源:互联网 发布:最新的p2p网络投资 编辑:程序博客网 时间:2024/06/05 03:47
在网上找了这么多都没有JS生成表格然后JS操作合并单元格的,或者是别人写的太负责了,又不想去理解,所以就自己动手写了个简单点的。
其实代码也不多,思路清晰就基本上可以了。一开始的时候是被colspan蒙了,因为要注意大小写才可以的。看下代码,
- <html>
- <head>
- <script type="text/javascript">
- function showRowOrColTable(){
- //创建table
- var table = document.createElement("table");
- var projectid=3; //看图下合并多少列就写多少
- table.border = "1";
- var rowIndex = 0;
- var rowStart = 0;
- var rowLength = 2;
- var colIndex = 1;
- var colLength = 2;
- var projectLength=projectid*2;
- for ( var i = 0; i < 5; i++) {
- var row = table.insertRow(i);
- for ( var j = 0; j < projectLength+1; j++) {
- var cell = row.insertCell(j);
- cell.innerHTML = "hello world"; //赋值内容
- }
- }
- for ( var j = 0; j <= rowIndex; j++) {
- table.rows[j].cells[colIndex].colSpan = projectid;
- table.rows[j].cells[projectid*2-1].colSpan = projectid;
- for ( var i = 0; i < projectid - 1; i++) {
- table.rows[j].deleteCell(colIndex+1);
- table.rows[j].deleteCell(3);
- }
- }
- table.rows[rowIndex].cells[rowStart].rowSpan = 2;
- table.rows[rowIndex + 1].deleteCell(0);
- table.rows[0].cells[0].innerHTML = " ";
- table.rows[0].cells[1].innerHTML = "个人得分";
- table.rows[0].cells[2].innerHTML = "个人准确率";
- table.rows[1].cells[0].innerHTML = "第一";
- table.rows[1].cells[1].innerHTML = "第二";
- table.rows[1].cells[2].innerHTML = "第一";
- table.rows[1].cells[3].innerHTML = "第二";
- var _row=table.rows[1];
- document.getElementById("table").appendChild(table);
- }
- </script>
- </head>
- <body onLoad="showRowOrColTable()">
- <div id="table"></div>
- </body>
- </html>
如图:
本文出自 “Just do it” 博客,请务必保留此出处http://davenzeng.blog.51cto.com/3896952/1128284
0 0
- JS生成表格,合并单元格
- js动态合并表格单元格
- js 动态合并表格单元格
- POI生成excel表格,如何合并单元格
- POI生成excel表格,如何合并单元格
- JS:jquery插件表格单元格合并.
- js动态生成table 合并单元格
- 表格单元格合并
- Bootstrap-表格合并单元格
- table表格--合并单元格
- jxl生成表格(合并单元格,字体,样式。。。)
- jxl生成表格(合并单元格,字体,样式)
- Java动态生成excel表格,动态合并多个单元格
- java 用poi 生成表格合并单元格放法
- jquery.table.rowspan.js 表格自动合并单元格插件
- JS前端动态添加表格--包括合并指定单元格
- HTML表格中的单元格合并
- 合并表格(Table)单元格
- uboot启动流程详解(5)-_main
- linu命令学习-文件查找之find-exec命令
- PHP模拟登录并获取数据
- 加密法(AES,MD5)----对String加密
- myeclipse代码生成插件的方式
- JS生成表格,合并单元格
- 几种数据库的连接方式
- Android中常见的流式布局的使用
- DOM读取xml文件
- WebLoginc配置数据源出现Resource Exception
- JAVA将UNICODE码转成中文遇到的问题
- springmvc+hibernate的一个简单实例
- 通过重载避免隐式类型转换
- Hillstone 外网访问内网 端口映射