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:

http://rayz.ru/stackoverflow/original.gif

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. Thanx in advance!

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

Answer 1

The HTML you say the JQuery is rendering is valid and does render correctly in IE6/7/8. So my bet is that the JQuery code is producing something other than the HTML you have listed and the most likely candidate would be this line in the code you have provided:

var currZone = opts.zones[currZoneIndex];

I'd go back and look at how you defined this object opt.zones. I understand that it apparently renders OK in other browsers but my primary point is that, in IE, so does the HTML you listed...so thats not the problem. What does your HTML actually look like?

Answer 2

First things first: please make sure your plugin generates valid HTML - make sure all the elements are in lowercase and that all your elements' attributes are enclosed in double quote marks.

I'd suggest that for ensuring the widths, heights and other stylistic elements, you use a stylesheet as part of your plugin. That will make it simpler to control the appearance of your table overall.

For defining column (cell) widths, try creating a <colgroup> element that can be inserted right after your <table> element.

<table>
  <colgroup>
    <col style="width: 107px;" />
    <col style="width: 255px;" />
    <col style="width: 108px;" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td></td>
    </tr>
    ...
</table>

That will clean things up a bit and make it easier to identify what IE is misinterpreting.

Answer 3

Firstly don't do this in IE6 - your code will be prone to a nasty issue in IE6 called the DOM insertion order bug: http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx.

Basically in IE6 you can't build up your table and then add it to the page (like any good developer would - why fire extra page layouts?) you have to add the table to the page, then add a row, then add a cell - all top down and forcing a layout each time. Nasty.

Your HTML looks like it would render correctly in IE7, so I'd look at the javascript - are you sure that it's producing that HTML in all browsers? For instance document.createElement('td') shouldn't create <TD> tags with unquoted attributes.

So either in IE7 (with a plugin) or IE8 (which finally has developer tools) I'd investigate the DOM actually produced.

Answer 4

At least IE6 is very bad with empty cells. Adding an   to each cell helps.

Answer 5

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;