jQuery合并同一列中相同文本的相邻单元格
2024-10-15 02:36:48
一、效果图
二、在html的head中引入jQuery
<script language="javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
三、添加合并单元格的函数
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function _w_table_rowspan(_w_table_id,_w_table_colnum){
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = 0;
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}
}
});
}
//函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
// 如果为数字,则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = 0;
$(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){
_w_table_Obj = $(this).children();
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){
return "";
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("colSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}
}
});
});
}
四、在head<script>中调用合并函数合并单元格
$(document).ready(function(){
_w_table_rowspan("#campusTable",2);
_w_table_rowspan("#campusTable",1);
});
参考链接:https://www.cnblogs.com/ly5201314/archive/2009/08/13/1545116.html
最新文章
- Ubuntu 14.04 无线网卡驱动安装
- 利用Babel来转化你的ES2015脚本初步
- django中间件
- phonegap 3.3教程 地理信息api教程
- Enum:Backward Digit Sums(POJ 3187)
- bat 脚本传递参数测试
- Entity Framework学习(一)
- Spring Aop重要概念介绍及应用实例结合分析
- POJ 3311 Hie with the Pie(状压DP + Floyd)
- JS生成 UUID的方法
- JS 单线程和事件循环
- float clearfix
- None.js 第六步 Stream(流)
- 54. Spiral Matrix以螺旋顺序输出数组
- 用rand()和srand()产生伪随机数的方法总结 【转】
- syslog-ng应用详解
- docker构建tomcat镜像
- Spring quartz Job不能依赖注入,Spring整合quartz Job任务不能注入
- Java中 static、final和static final的特点及区别
- Archlive新年第一棒: 基于2.6.37稳定内核的archlive20110107
热门文章
- WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗
- 解决C#中调用WCF方法报错:远程服务器返回错误 (404) 未找到
- 牛客JS编程大题(二)
- 抽取JDBC工具类并增删改查
- [Swift]LaunchScreen.storyboard设置启动页
- Swift5 语言指南(十六) 初始化
- 修改hosts文件用来观看coursera视频
- Could not load file or assembly Microsoft.SqlServer.management.sdk.sfc version 11.0.0.0
- Linux - 结合正则表达式使用grep命令
- LeetCode--No.002 Add Two Numbers