IE7 glitches with building tables cells dynamically

Question

I am working on jQuery plugin. It building tables dynamically.

// ... ...
var currentTBL = document.createElement('table');
$(currentTBL).attr('width', _width).attr('height', _height);

var currZoneIndex = 0;
for (var y = 0; y < limitRow; y++) {
 var currentTR = document.createElement('tr');
 var currentWidth = 0;
 for (var x = 0; x < limitCol; x++) {
  if (!opts.matrix[y * limitCol + x]) continue;
  var currZone = opts.zones[currZoneIndex];
  var cellSizes = getSizes(opts.zones[currZoneIndex]);
  currentTD = document.createElement('td');
  $(currentTD)
    .attr('colspan', currZone.colspan)
    .attr('rowspan', currZone.rowspan)
    .attr('width', cellSizes.x)
    .attr('height', cellSizes.y);
  $(currentTR).append(currentTD);
  currZoneIndex++;
 }
 $(currentTBL).append(currentTR);
}
// ... ...

This part of code gives me a table object and It's HTML is:

<TABLE width=470 height=150>
  <TR valign="top">
    <TD height=48 width=107 colspan="1"></TD>
    <TD height=48 width=255 colspan="1"></TD>
    <TD height=48 width=108 colspan="1"></TD>
  </TR>
  <TR valign="top">
    <TD height=61 width=362 colspan="2"></TD>
    <TD height=61 width=108 colspan="1"></TD>
  </TR>
  <TR valign="top">
    <TD height=41 width=107 colspan="1"></TD>
    <TD height=41 width=255 colspan="1"></TD>
    <TD height=41 width=108 colspan="1"></TD>
  </TR>
</TABLE>

It looks normally with FF, Opera, Safari,..: IE7 || IE6 showing something like this:

_{(source: rayz.ru)}

I have a solution which re-paste table on the same place. But it breaks all kind of event handlers on my table.

Please help me with solution.

Simplified plugin demo: http://rayz.ru/stackoverflow/test/

Answer 1

Solution is setting rowspan and colspan attributes of TD elements directly in javascript object properties, not with .attr method of jQuery.

That's wrong:

 $(currentTD)
    .attr('colspan', currZone.colspan)
    .attr('rowspan', currZone.rowspan);

That's correct:

  currentTD.colSpan = currZone.colspan;
  currentTD.rowSpan = currZone.rowspan;