封装代码:

jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件
return this.each(function () {
var that;
$('tr', this).each(function (row) {
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}

  调用方式:

$("#ceshi").rowspan(0); //.rowspan(0)从0即第一列开始

  2纯js写法:

function hb(){
var tab = document.getElementById("subtable");
var maxCol = 3, val, count, start;
var ys="";
for(var col = maxCol-1; col >= 0 ; col--) {
count = 1;
val = "";
for(var i=0; i<tab.rows.length; i++){
if(val == tab.rows[i].cells[col].innerHTML){
count++;
}else{
if(count > 1){
//合并
start = i - count;
if(ys=="#00FFFF"){
ys="#EEEE00";
}else{
ys="#00FFFF";
}
tab.rows[start].cells[col].rowSpan = count;
tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色
// ys="#EEEE00";
// tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
for(var j=start+1; j<i; j++){ //
tab.rows[j].cells[col].style.display = "none";
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
} if(count > 1 ){ //合并,最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for(var j=start+1; j<i; j++) {
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
}
}
}

第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即$("#ceshi").rowspan(0); 
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。

最新文章

  1. Error:const char* 类型的实参和LPCWSTR类型的形参不兼容的解决方法。
  2. 设置Textview最大长度,超出显示省略号
  3. asp xmlhttp 读取文件
  4. ==与equals()的区别
  5. keep your work after network broken
  6. 总结nonatomic,assigncopy,retain
  7. C51 延时程序
  8. 构建高并发&amp;高可用&amp;安全的IT系统-高并发部分
  9. gitlab 权限说明
  10. 【python深入】map/reduce/lambda 内置函数的使用
  11. gitlab汉化
  12. _T宏的使用
  13. Html from 标签
  14. spring boot (2):spring boot 打包tomcat、tomcat 部署多个项目、服务器部署项目SSL 设置(阿里云)
  15. Elasticsearch中使用groovy脚本处理boolean字段的一个问题
  16. fiddler 显示server ip
  17. vbox 虚拟机添加usb
  18. 『实践』Yalmip+Ipopt+Cplex使用手册
  19. Word 2010之简单图文混排
  20. 06Vue.js快速入门-Vue组件化开发

热门文章

  1. rxjs-流式编程
  2. Vue.directive 自定义指令的问题
  3. Shell——数学计算
  4. String不可变StringBuffer可变
  5. SpringMVC的数据转换,格式化和数据校验
  6. java编程思想第四版第五章习题
  7. C#访问修饰符(public,private,protected,internal,sealed,abstract)
  8. WINDOWS的错误代码对应的故障
  9. Asp.net的sessionState四种模式配置方案
  10. 代码管理必备-----git使用上传码云