I have made a table with a thead
(header); on a Mac, and in Firefox everything is fine, but on Internet Explorer 6 the head is just gone...
Any idea why?
Here is the link to test it: .php... The table is constructed in 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();
});
};
...from a list on the page:
<ul>
<li> Date*Endroit*Sanction</li>
<li> 29 Mars & 5 Avril*St-Évariste, Beauce # 1*Équipe Rodéo du Qc.</li>
<li> 12 & 19 Avril*St-Évariste, Beauce # 2*Équipe Rodéo du Qc.</li>
<!-- ... -->
</ul>
I have made a table with a thead
(header); on a Mac, and in Firefox everything is fine, but on Internet Explorer 6 the head is just gone...
Any idea why?
Here is the link to test it: http://www.acecrodeo./new/05-rodeos.php... The table is constructed in 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();
});
};
...from a list on the page:
<ul>
<li> Date*Endroit*Sanction</li>
<li> 29 Mars & 5 Avril*St-Évariste, Beauce # 1*Équipe Rodéo du Qc.</li>
<li> 12 & 19 Avril*St-Évariste, Beauce # 2*Équipe Rodéo du Qc.</li>
<!-- ... -->
</ul>
Share
Improve this question
edited Feb 25, 2009 at 18:11
Shog9
160k36 gold badges235 silver badges240 bronze badges
asked Feb 25, 2009 at 17:45
menardmammenardmam
9,98629 gold badges87 silver badges114 bronze badges
2
- I don't find any THEAD at all in the code... – Guffa Commented Feb 25, 2009 at 17:57
- The table is built by JS from a list. – Shog9 Commented Feb 25, 2009 at 17:59
2 Answers
Reset to default 6You're including <th>
elements directly in the <thead>
group; that's not actually legal. You must enclose them in a <tr>
element, and put that in the <thead>
...
See: 11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements
So modify jQuery.fn.tablerize()
to insert a <tr>
within the <thead>
before appending the <th>
elements:
table = $('<table>');
var thead = $('<thead>');
var headRow = $('<tr>');
$.each(values, function(y) {
headRow.append($('<th>').html(values[y]));
});
thead.append(headRow);
table.append(thead);
Note that you're also omitting the <tbody>
element; you should probably put the rest of the rows in one of those as well.
Well since I'm the author of tablerize I might as well fix it.
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();
});
};
That should do it.