This is how you do it, if you have HTML that looks like this:
<ul id='my_oddly_formatted_list1' class='odd_list'>
<li>Column A|Column B|Column C</li>
<li>Value A1|Value B1|Value C1</li>
<li>Value A2|Value B1|Value C2</li>
<li>Value A3|Value B1|Value C3</li>
<li>Value A4|Value B1|Value C4</li>
</ul>
<ul id='my_oddly_formatted_list2' class='odd_list'>
<li>Column D|Column E|Column F</li>
<li>Value D1|Value E1|Value F1</li>
<li>Value D2|Value E1|Value F2</li>
<li>Value D3|Value E1|Value F3</li>
<li>Value D4|Value E1|Value F4</li>
</ul>
<ul id='my_oddly_formatted_list3' class='odd_list'>
<li>Column G|Column H|Column I</li>
<li>Value G1|Value H1|Value I1</li>
<li>Value G2|Value H1|Value I2</li>
<li>Value G3|Value H1|Value I3</li>
<li>Value G4|Value H1|Value I4</li>
</ul>
Then with jQuery you could write a plugin like this:
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();
});
};
Which you could then call any of the following ways:
// tablerize all UL elements in the page
$('ul').tablerize();
// only UL elements with class 'odd_list'
$('ul.odd_list').tablerize();
// individually tablerize all the lists
$('#my_oddly_formatted_list1').tablerize();
$('#my_oddly_formatted_list2').tablerize();
$('#my_oddly_formatted_list3').tablerize();
As far as sorting and so on, there are many plugins available to give this functionality to a table.
** EDIT **
The problem with your code is in these lines:
$(document).ready(function() {
/*$('#texte > h1').next().hide(1000); */
$('#texte > h1').click(function() {
$(this).tablerize();
/*$(this).next().toggle(500);*/
});
});
The tablerize plugin I wrote expects a <ul> element to tablerize. When you pass it this you are passing it the h1 that was matched, not the <ul>. If you replace this line:
$(this).tablerize();
With this line, which will find the UL element immediately after the header:
$(this).next('ul').tablerize();
It should work as you intend.
Also:
- To update your question, you just click 'edit' and add in whatever you want.
- To accept an answer, you click on the check to the left of this text.