jquery 实现表格相同列表单元格合并
最近在开发客户网站的时候,客户提出了一个奇葩的需求,需要将表格做出如下的合并!



其实合并相同的列表这个网上有现成的 js 可以用的,但是在第二列整列都是相同的,如果单纯的做相同的合并,那么整列就都相同了,客户看了之后就说需要将第二列改成与第一列同样的合并高度。

无奈,客户是上帝啊!

于是乎,开始找规律,最后跟客户沟通后发现他们的产品名称是有规律的,都是xxx-xxx-xx的格式。

有了规律,那就只剩代码的事情了!

下面我将修改后的代码赠予有缘人!

$(".table-left").each(function () {
var col=$(this).find('tr:first th').length;
for(var i=0;i<col-1;i++){
$(this).rowspan(i);
}
})

jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
var rowspan;
$('tr', this).each(function(row) {

$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
/*上一行*/
var prev_name=$(this).parent().prev().find('td:last').text()
var prev_name_arr=prev_name.split('-');
/*当前行*/
var pro_name=$(this).parent().find('td:last').text()
var pro_name_arr=pro_name.split('-')
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) { /*如果是列第一个*/
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan");
}

if(prev_name_arr[1]!=pro_name_arr[1]){ /*如果当前行的值与上一行的值不相等*/
that = this; /*就把当前行记录进行比较*/
}else{
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
}
} else {
that = this;
}
});
});
});
}

评论() 相关

收藏

赞

landedaima

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。