Почему моя thead не появляется в Internet Explorer?

Question

Я сделал таблицу с 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>

Answer 1

Вы включаете <th> элементы непосредственно в группу <thead>; это на самом деле не законно. Вы должны заключить их в элемент <tr> и поместить , что в <thead> ...

См .: 11.2.3 Группы строк: элементы THEAD, TFOOT и TBODY

Поэтому измените jQuery.fn.tablerize(), чтобы вставить <tr> в <thead> перед добавлением элементов <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>; Вам, вероятно, следует поместить остальные строки в один из них.

Answer 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();
    });
};

Это должно сделать это.