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非常糟糕。添加＆amp; 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;