jquery table表格合并一列中相同的内容rowspan - findtp插件网

findtp插件网

您现在的位置是:首页> 代码分享 -> jquery table表格合并一列中相同的内容rowspan

Article

jquery table表格合并一列中相同的内容rowspan

findtp插件网2019-05-18 代码分享1196

写一个jquery的小插件,可以直接jquery().xxx调用,代码如下:

jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
      return this.each(function(){
         var that;//that=第一个单元格td,后续遇到相同的都hide(),并把that的rowspan设置为合并的行数,达到合并目的
         $('tr[_target="datarow"]', this).each(function(row) { //过滤要操作的行
            $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) { //过滤要操作的所有一列单元格
               if (that!=null && $("input[id^='field13985_']",this).val() == $("input[id^='field13985_']",that).val()) { //上下两行比较单元格
                  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;
               }
            });
         });
      });
   }

以上的代码不一定可以直接拿来用,要根据自己的table样式修改,比如下面的几行。


$('tr[_target="datarow"]', this).each(function(row) { //过滤要操作的行,这里tr要过滤下,有些有header的tr就不要考虑了。


if (that!=null && $("input[id^='field13985_']",this).val() == $("input[id^='field13985_']",that).val()) { //上下两行比较单元格,$("input[id^='field13985_']",this).val()是td内部比较的内容,有些是td内的html内容,这里是

td单元格里面的input的值进行比较。


这个合并单元格小插件调用代码:

$("#table1").rowspan(0);//0表示传入的参数是对应从0开始的列数,如果是第二列,传1


文章评论

共有0条评论来说两句吧...