为什么我的广告没有出现在 Internet Explorer 中？答案

【问题标题】：Why is my thead not appearing in Internet Explorer?为什么我的广告没有出现在 Internet Explorer 中？
【发布时间】：2010-10-09 21:07:30
【问题描述】：

我制作了一个带有thead（标题）的表格；在 Mac 上，在 Firefox 中一切都很好，但在 Internet Explorer 6 上，头部就消失了……

知道为什么吗？

这里是测试它的链接：http://www.acecrodeo.com/new/05-rodeos.php... 该表是在tablerize.js中构造的：

jQuery.fn.tablerize = function() {
    return this.each(function() {
        var table;
        $(this).find('li').each(function(i) {
            var values = $(this).html().split('*');
            if(i == 0) {
                table = $('<table>');
                var thead = $('<thead>');
                $.each(values, function(y) {
                    thead.append($('<th>').html(values[y]));
                });
                table.append(thead);
            } else {
               var tr = $('<tr>');
               $.each(values, function(y) {
                   tr.append($('<td>').html(values[y]));
               });
               table.append(tr);
            }
        });
        $(this).after(table).remove();
    });
};

...来自页面上的列表：

<ul>

<li>&nbsp; Date*Endroit*Sanction</li>
<li>&nbsp; 29 Mars &amp; 5 Avril*St-&Eacute;variste, Beauce&nbsp; # 1*&Eacute;quipe Rod&eacute;o du Qc.</li>
<li>&nbsp; 12 &amp; 19 Avril*St-&Eacute;variste, Beauce&nbsp; # 2*&Eacute;quipe Rod&eacute;o du Qc.</li>
<!-- ... -->
</ul>

【问题讨论】：

我在代码中根本找不到任何 THEAD...
表格是JS从列表中构建的。

标签： javascript html internet-explorer dom

【解决方案1】：

您将<th> 元素直接包含在<thead> 组中；这实际上是不合法的。您必须将它们包含在 <tr> 元素中，并将 that 放入 <thead>...

见：11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements

因此修改jQuery.fn.tablerize()，在<thead> 中插入<tr>，然后再添加<th> 元素：

table = $('<table>');
var thead = $('<thead>');
var headRow = $('<tr>');
$.each(values, function(y) {
      headRow.append($('<th>').html(values[y]));
   });
thead.append(headRow);
table.append(thead);

请注意，您还省略了 <tbody> 元素；您可能也应该将其余行放在其中之一中。

【讨论】：

【解决方案2】：

好吧，既然我是tablerize的作者，我不妨修复它。

jQuery.fn.tablerize = function() {
    return this.each(function() {
        var table = $('<table>');
        var tbody = $('<tbody>');
        $(this).find('li').each(function(i) {
            var values = $(this).html().split('*');
            if(i == 0) {
                var thead = $('<thead>');
                var tr = $('<tr>');
                $.each(values, function(y) {
                    tr.append($('<th>').html(values[y]));
                });
                table.append(thead.append(tr));
            } else {
               var tr = $('<tr>');
               $.each(values, function(y) {
                   tr.append($('<td>').html(values[y]));
               });
               tbody.append(tr);
            }
        });
        $(this).after(table.append(tbody)).remove();
    });
};

应该可以的。

【讨论】：