Monday, July 30, 2007

jQuery colspan and rowspan table using cell break

xxxhx1hx1hx1
xxxhxx1hxx2hxx3
hy1hyy1hy1a123
hy1hyy2hy11.12.13.1
hy1hyy3hy1456
hy2hyy3hy1789
hy2hyy3hy1101112
hy2hyy3hy1131415
hy3hyy3hy2123
hy3hyy3hy2123
hy2hyy3hy1123
hy2hyy3hy1123
hy3hyy3hy2123
hy3hyy3hy2123
Example:
 $("#table").rowspan(0);
 $("#table").rowspan(1);
 $("#table").rowspan(2);
 $('table tbody tr:visible').each(function(row) {
   $('#table1').colspan(row);
 })
jQuery.fn.rowspan = function(colIdx) {
 return this.each(function(){

  var that;
  $('tr', this).each(function(row) {
  $('th:eq('+colIdx+')', this).filter(':visible').each(function(col) {
      if ($(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); // do your action for the colspan cell here
        $(this).hide(); // .remove(); // do your action for the old cell here
      } else {
        that = this;
      }
      that = (that == null) ? this : that; // set the that if not already set
  });
 });

 });
}
jQuery.fn.colspan = function(rowIdx) {
 return this.each(function(){

  var that;
  $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {
  $(this).find('th').filter(':visible').each(function(col) {
      if ($(this).html() == $(that).html()) {
        colspan = $(that).attr("colSpan");
        if (colspan == undefined) {
          $(that).attr("colSpan",1);
          colspan = $(that).attr("colSpan");
        }
        colspan = Number(colspan)+1;
        $(that).attr("colSpan",colspan);
        $(this).hide(); // .remove();
      } else {
        that = this;
      }
      that = (that == null) ? this : that; // set the that if not already set
  });
 });

 });
}

11 comments:

Anonymous said...

This is great info to know.

Anonymous said...

Amiable dispatch and this post helped me alot in my college assignement. Thank you as your information.

apneadiving said...

Thank you very much for this code, it's exactly what I was looking for!
Cheers :)

Unknown said...

can u give me the jquery plug in for that ...

Unknown said...

Can u give ur plug in for that example

Unknown said...

Hi..

I want the code for this task

merging cols when they have same text

Can u give me..

7sajjad8khan6@gmail.com

Anil said...

Hi,

thanks for ur valuable post. this is what i'm looking for.

This post is very useful when the table cells were empty. Can u help me, how to merge table cells(colspan and rowspan) with having data on it....After merging it has to show both cells data into a single cell.

Thanks,

Anil

Anonymous said...

Nice and simple. Thank you!

loser said...

thank you!!!

I use this code.
very good!!!

thank you!

jair said...

Hi,

You can improve perfomance.
$('th:eq('+colIdx+')', this) is too slow, is better to use
$('td',this).eq(colIdx)

You can find an explanation here:
http://stackoverflow.com/questions/8401293/why-is-jquery-tdeq0-slower-than-td-eq0

jair said...

Hi,

You can improve perfomance.
$('th:eq('+colIdx+')', this) is too slow, is better to use
$('td',this).eq(colIdx)

You can find an explanation here:
http://stackoverflow.com/questions/8401293/why-is-jquery-tdeq0-slower-than-td-eq0