封装Jquery 合并table中任何同列数据
2024-09-13 04:00:01
封装代码:
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里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。
最新文章
- Error:const char* 类型的实参和LPCWSTR类型的形参不兼容的解决方法。
- 设置Textview最大长度,超出显示省略号
- asp xmlhttp 读取文件
- ==与equals()的区别
- keep your work after network broken
- 总结nonatomic,assigncopy,retain
- C51 延时程序
- 构建高并发&;高可用&;安全的IT系统-高并发部分
- gitlab 权限说明
- 【python深入】map/reduce/lambda 内置函数的使用
- gitlab汉化
- _T宏的使用
- Html from 标签
- spring boot (2):spring boot 打包tomcat、tomcat 部署多个项目、服务器部署项目SSL 设置(阿里云)
- Elasticsearch中使用groovy脚本处理boolean字段的一个问题
- fiddler 显示server ip
- vbox 虚拟机添加usb
- 『实践』Yalmip+Ipopt+Cplex使用手册
- Word 2010之简单图文混排
- 06Vue.js快速入门-Vue组件化开发