使用JS合并单元格
来源:互联网 发布:知乎北理工足球 编辑:程序博客网 时间:2024/06/05 01:16
使用JS合并单元格
表格中经常会有不规则的表格出现,收集了点网上写的合并单元格的js代码,感觉可以扩展,于是就试着扩展了一下,
不过只能合并表格中的数据时有规律的数据,不能进行任意合并。
下面是些写的脚本代码
- ///////////////////////////////////////////////
- // 功能:合并表格
- // 参数:tb--需要合并的表格ID
- // 参数:colLength--需要对前几列进行合并,比如,
- // 想合并前两列,后面的数据列忽略合并,colLength应为2
- ///////////////////////////////////////////////
- function unionTab(tb, colLength) {
- // 检查表格是否规整
- if (!checkTab(tb))
- return;
- var i = 0;
- var j = 0;
- var rowCount = tb.rows.length; // 行数
- var colCount = tb.rows[0].cells.length; // 列数
- var obj1 = null;
- var obj2 = null;
- var objtemp1=new Array();
- var objtemp2=new Array();
- //为每个单元格命名,表头不命名
- for (i = 1; i < rowCount; i++) {
- for (j = 0; j < colCount; j++) {
- tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();
- }
- }
- var k=colLength-1;
- //从后往前检查,进行逐列检查合并,开始列为colLength-1
- for (i = k; i >= 0; i--) {
- //当i>0时有前方的单元格
- if (i > 0) {
- //查找当前单元格前几单元格,l为列值
- for(l=0;l<i;l++)
- {
- objtemp1[l]=document.getElementById("tb_1_" + l.toString());
- alert("单元格objtemp1,1_"+l.toString() + ",内容:" + objtemp1[l].innerText);
- }
- }
- obj1 = document.getElementById("tb_1_" + i.toString());
- for (j = 2; j < rowCount; j++) {
- if (i > 0) {
- //查找当前单元格前几单元格,l为列值
- for(l=0;l<i;l++){
- objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"
- + l.toString());
- }
- }
- obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());
- if (obj1.innerText == obj2.innerText) {
- if (i > 0) {
- if (checkArray(objtemp1,objtemp2)) {
- obj1.rowSpan++;
- obj2.parentNode.removeChild(obj2);
- } else {
- obj1 = document.getElementById("tb_" + j.toString()
- + "_" + i.toString());
- for(l=0;l<i;l++){
- objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"
- + l.toString());
- }
- }
- } else {
- obj1.rowSpan++;
- obj2.parentNode.removeChild(obj2);
- }
- } else {
- obj1 = document.getElementById("tb_" + j.toString() + "_"
- + i.toString());
- }
- }
- }
- }
- /////////////////////////////////////////
- // 功能:检查表格是否规整
- // 参数:tb--需要检查的表格ID
- // ///////////////////////////////////////
- function checkTab(tb) {
- if (tb.rows.length == 0)
- return false;
- //如果只有一行表头也返回false
- if(tb.rows.length==1)
- return false;
- if (tb.rows[0].cells.length == 0)
- return false;
- for ( var i = 0; i < tb.rows.length; i++) {
- if (tb.rows[0].cells.length != tb.rows[i].cells.length)
- return false;
- }
- return true;
- }
- //检查取出的值是否相等
- function checkArray(arr1,arr2){
- for(i=0;i<arr1.length;i++){
- if(arr1[i].innerText==arr2[i].innerText){
- }else{
- return false;
- }
- }
- return true;
- }
/////////////////////////////////////////////// // 功能:合并表格 // 参数:tb--需要合并的表格ID // 参数:colLength--需要对前几列进行合并,比如, // 想合并前两列,后面的数据列忽略合并,colLength应为2 /////////////////////////////////////////////// function unionTab(tb, colLength) {// 检查表格是否规整 if (!checkTab(tb))return;var i = 0;var j = 0;var rowCount = tb.rows.length; // 行数var colCount = tb.rows[0].cells.length; // 列数var obj1 = null;var obj2 = null;var objtemp1=new Array();var objtemp2=new Array();//为每个单元格命名,表头不命名for (i = 1; i < rowCount; i++) {for (j = 0; j < colCount; j++) {tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();}}var k=colLength-1;//从后往前检查,进行逐列检查合并,开始列为colLength-1for (i = k; i >= 0; i--) { //当i>0时有前方的单元格if (i > 0) {//查找当前单元格前几单元格,l为列值for(l=0;l<i;l++){objtemp1[l]=document.getElementById("tb_1_" + l.toString());alert("单元格objtemp1,1_"+l.toString() + ",内容:" + objtemp1[l].innerText);}}obj1 = document.getElementById("tb_1_" + i.toString());for (j = 2; j < rowCount; j++) {if (i > 0) {//查找当前单元格前几单元格,l为列值for(l=0;l<i;l++){objtemp2[l]=document.getElementById("tb_" + j.toString() + "_"+ l.toString());}}obj2 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());if (obj1.innerText == obj2.innerText) {if (i > 0) {if (checkArray(objtemp1,objtemp2)) {obj1.rowSpan++;obj2.parentNode.removeChild(obj2);} else {obj1 = document.getElementById("tb_" + j.toString()+ "_" + i.toString());for(l=0;l<i;l++){objtemp1[l]=document.getElementById("tb_" + j.toString() + "_"+ l.toString());}}} else {obj1.rowSpan++;obj2.parentNode.removeChild(obj2);}} else {obj1 = document.getElementById("tb_" + j.toString() + "_"+ i.toString());}}}}///////////////////////////////////////// // 功能:检查表格是否规整// 参数:tb--需要检查的表格ID// ///////////////////////////////////////function checkTab(tb) {if (tb.rows.length == 0)return false;//如果只有一行表头也返回falseif(tb.rows.length==1)return false;if (tb.rows[0].cells.length == 0)return false;for ( var i = 0; i < tb.rows.length; i++) {if (tb.rows[0].cells.length != tb.rows[i].cells.length)return false;}return true;}//检查取出的值是否相等function checkArray(arr1,arr2){for(i=0;i<arr1.length;i++){if(arr1[i].innerText==arr2[i].innerText){}else{return false;}}return true;}
以上脚本可以处理像如下表格中的数据,表格中相同内容的单元格会进行合并,并具有依赖性。
即只有依赖列相同,才会进行合并。
- <html>
- <body>
- <table width="400" border="1" id="table1">
- <tr>
- <td>总公司</td>
- <td>分公司</td>
- <td>部门</td>
- <td>科室</td>
- <td>人员</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>100部门</td>
- <td>200科室</td>
- <td>1</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>100部门</td>
- <td>200科室</td>
- <td>2</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>100部门</td>
- <td>201科室</td>
- <td>3</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>100部门</td>
- <td>201科室</td>
- <td>4</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>200部门</td>
- <td>201科室</td>
- <td>5</td>
- </tr>
- <tr>
- <td>a总公司</td>
- <td>for分公司</td>
- <td>200部门</td>
- <td>201科室</td>
- <td>6</td>
- </tr>
- <tr>
- <td>b总公司</td>
- <td>for分公司</td>
- <td>200部门</td>
- <td>201科室</td>
- <td>7</td>
- </tr>
- <tr>
- <td>b总公司</td>
- <td>for分公司</td>
- <td>200部门</td>
- <td>201科室</td>
- <td>8</td>
- </tr>
- </table>
- <br>
- <input type="button" value="合并表格" onClick="unionTab(table1,4)">
- </body>
- </html>
转摘网址:
http://gzcj.iteye.com/blog/803307
- 使用JS合并单元格
- 使用js多级次合并单元格
- JS合并单元格、JavaScript单元格合并
- JS合并单元格。
- js 合并单元格
- JS合并单元格
- js合并单元格
- js table 单元格合并
- JS动态合并单元格
- 全功能合并单元格js
- js 动态合并单元格
- js自动合并单元格
- js合并单元格
- js合并table单元格
- JS手动合并单元格
- js合并table单元格
- js合并table单元格
- js动态合并表格单元格
- Skype for iPhone 来电后台唤醒原理 &2010 Apple iPhone 4.0 OS 发布会
- 对于CDHtmlDialog和JavaScript、HTML配合使用的一些技术总结
- python glob model
- wiresharkIP过滤:包括来源IP或者目标IP等于某个IP比如
- Google Maps JavaScript API V3的使用(一)
- 使用JS合并单元格
- Linux下三国杀聊天窗口乱码 解决方法
- struts2平台搭建
- 如何在 IOP 期刊上发表论文
- Eclipse获取工作空间路径
- EasyMock 使用方法与原理剖析
- Android210简介之神秘面纱
- DELPHI 线程类
- ava.lang.ClassNotFoundException: org.objectweb.asm.Type