IE7会动态地构建表格单元

Question

我正在研究jQuery插件。它动态构建表。

// ... ...
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);
}
// ... ...

这部分代码给了我一个表对象，它的HTML是：

<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>

它看起来通常与FF，Opera，Safari，..：IE7 || IE6显示如下：

（来源：rayz.ru）

我有一个解决方案，可以在同一个地方重新粘贴表格。但它打破了我桌上的所有事件处理程序。

请帮我解决问题。

简化的插件演示：http://rayz.ru/stackoverflow/test/

Answer 1

您说JQuery正在呈现的HTML是有效的，并且在IE6 / 7/8中正确呈现。所以我敢打赌，JQuery代码产生的东西不是你列出的HTML，而且最有可能的候选者就是你提供的代码中的这一行：

var currZone = opts.zones[currZoneIndex];

我回过头来看看你如何定义这个对象opt.zones。我明白它显然在其他浏览器中呈现OK但我的主要观点是，在IE中，你列出的HTML也是如此......所以这不是问题所在。你的HTML实际上是什么样的？

Answer 2

首先要做的事情是：请确保您的插件生成有效的HTML - 确保所有元素都是小写的，并且所有元素的属性都用双引号括起来。

我建议，为了确保宽度，高度和其他风格元素，您可以使用样式表作为插件的一部分。这样可以更简单地控制整个表格的外观。

要定义列（单元格）宽度，请尝试创建一个可以在<colgroup>元素后面插入的<table>元素。

<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>

这样可以清理一些东西，并更容易识别IE误解的内容。

Answer 3

首先不要在IE6中这样做 - 你的代码在IE6中容易出现一个令人讨厌的问题，称为DOM插入命令错误：http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx。

基本上在IE6中你不能构建你的表然后将它添加到页面（就像任何优秀的开发人员一样 - 为什么要激发额外的页面布局？）你必须将表添加到页面，然后添加一行，然后添加一个单元格 - 所有自上而下并每次强制布局。讨厌。

你的HTML看起来好像可以在IE7中正确呈现，所以我会看一下javascript - 你确定它在所有浏览器中生成HTML吗？例如，document.createElement('td')不应该使用不带引号的属性创建<TD>标签。

因此，无论是在IE7（带插件）还是IE8（最终都有开发人员工具），我都会调查实际生成的DOM。

Answer 4

对于空单元格，至少IE6非常糟糕。添加＆nbsp;每个细胞都有帮助。

Answer 5

解决方案是直接在javascript对象属性中设置TD元素的rowspan和colspan属性，而不是使用jQuery的.attr方法。

那是错的：

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

那是对的：

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