php相同数据合并单元格,基于JQuery实现相同内容合并单元格的代码

本文介绍了一种使用JQuery简化web前端表格显示的方法,通过自定义JQuery插件实现相同内容单元格的合并,有效减少table标签层级,提高页面加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下:

头部JQuery代码

复制代码 代码如下:

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;

}

});

});

});

}

$(function() {

$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始,哪一列有相同的内容就输入对应的列数值

$(“#table1″).rowspan(2);

});

在body里面加入一个表格

复制代码 代码如下:

1234
1f3s

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值