700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html相同数据合并单元格合并单元格 基于JQuery实现相同内容合并单元格的代码...

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

时间:2022-09-09 13:21:24

相关推荐

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

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里面加入一个表格

IE效果

火狐效果

更多的前端开发可以关注 UI前端

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。