通用表格合并单元格

1.源码:

/**

* 合并表格的列

* @param {String} tableId要合并的表格的id

* @param {int} fCol开始的列

* @param {int} eCol结束的列

* @return void

*/

function mergCol(tableId, fCol, eCol) {

var oTable = $(tableId);

if (!$chk(oTable)/*!oTable*/) {

return;

}

var oTBody = oTable.tBodies[0];

var oRows = oTBody.rows;

if (oRows.length == 0) {

return;

}

var rowspan = 1;

for ( var j = fCol; j <= eCol; j++) {

var oRow = oRows[0];

for ( var i = 1; i < oRows.length; i++) {

var oNextRow = oRows[i];

if ((oRow.cells[j] != null && oNextRow.cells[j] != null)

&& (oRow.cells[j].innerHTML == oNextRow.cells[j].innerHTML)) {

rowspan++;

oRow.cells[j].merg = rowspan;

oNextRow.cells[j].merg = -1;

} else {

oRow = oNextRow;

rowspan = 1;

}

}

}

for ( var i = oRows.length - 1; i >= 0; i--) {

for ( var j = eCol; j >= fCol; j--) {

var oRow = oRows[i];

if (oRow.cells[j] != null && oRow.cells[j].merg == -1) {

oRow.cells[j].parentNode.removeChild(oRow.cells[j]);

} else {

if (oRow.cells[j] != null && oRow.cells[j].merg > 0) {

oRow.cells[j].rowSpan = oRow.cells[j].merg;

}

}

}

}

}

应用:mergCol (‘edit-0‘,0,0);

时间: 2024-07-30 16:55:19

通用表格合并单元格的相关文章

display:table表格合并单元格

直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctype.html" %> <html> <head> <title>补贴项目属性管理</t

jQuery_easyUI 合并单元格 (DataGrid 数据表格)

<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagrid" rownumbers="true" data-options="fitColumns: true, iconCls: 'icon-edit', scrollbarSize:0, multiSort:true, remoteSort:true, paginatio

前端页面表格实现合并单元格

做报表,查询的时候,经常用到表格. 页面展示多条数据时,时常表格的第一列都是相同的,所以合并单元格,让表格看起来更直观. 写这个函数,其它js里面直接调用unionTab (tb,collength);其中第一个参数tb为表格ID,第二个参数为你想要进行单元格合并的表格列数. 缺点:只能实现前N列,不能实现某一列实现合并. /**/ window.unionTab = function (tb, colLength) { var id = tb; tb = $("#" + tb).ge

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

NPOI_winfrom导出Excel表格(合并单元格、规定范围加外边框、存储路径弹框选择)

1.导出 1 private void btn_print_Click(object sender, EventArgs e) 2 { 3 DataTable dtNew = new DataTable(); 4 5 dtNew.Columns.Add(new DataColumn("commodity_name", typeof(object))); 6 dtNew.Columns.Add(new DataColumn("specifications", type

vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv

LaTeX 绘制表格时合并单元格

使用 LaTeX 绘制表格时合并单元格,使用: \multicolumn{2} {|c|} { XXX内容 } 如: \begin{center} \begin{tabular}{|c|c|c|c|c|c|c|} \hline 显著性水平 & \multicolumn{2}{|c|}{$\leq0.01$} & \multicolumn{2}{|c|}{$\leq0.05$} & \multicolumn{2}{|c|}{$\leq0.1$}\\\hline 数据集 & $

【记录】解析具有合并单元格的Excel

最近公司让做各种数据表格的导入导出,就涉及到电子表格的解析,做了这么多天总结一下心得. 工具:NOPI 语言:C# 目的:因为涉及到导入到数据库,具有合并单元格的多行必然要拆分,而NPOI自动解析的时候拆分单元格除第一个单元格外其余值都是空,对于列头有合并项目的,数据库设计一般才有合并单元格下面的最小列单元作为数据库字段.于是希望达到这样一个效果.于是有了一个思路就是把读入的Excel复制到新建的Excel,然后再去读新的Excel.总体思路就是把合并单元格所包含的所有最小单元格的值都设置成合并

Extjs3.4 合并单元格

Ext3.4合并单元格 表格上添加grid-row-span样式 列Renderer绑定 预览效果 样式: 代码: 原文:http://www.sencha.com/forum/showthread.php?103133-GridPanel-row-spanning-%28well-sort-of...%29