Почему мой ад не появляется в 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

Ну, так как я являюсь автором 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(); 
    }); 
}; 

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

Answer 2

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

См: 11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements

Таким образом изменить 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>; вы должны, вероятно, поместить остальные строки в один из них.