Turn unordered list to a table with jQuery

Question

I like to get an <ul><li> and make it a nice table I will style with CSS.

I like the transformation to be made with jQuery

* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$

on and on....

and make a table head with the first line of the <ul> and table cell with the others...

There will be maybe 4-5 <ul>s on the page.

To add icing to the cake, let sort it from the biggest earner to the smallest!

---

I have found this question:

How to transform HTML table to list with JQuery?

it is exactly the opposite... but maybe a good start? I don't know, I will check it out... but still left the question widely open.

---

I have found this question:

How to transform HTML table to list with JQuery?

it is exactly the opposite... but maybe a good start? I don't know, I will check it out... but still left the question widely open.

---

Another question related to the solution...

If I like to "delete" the and replace it with the table..

I dont like to make an empty table..

here is the code... maybe not "optimized" but it work

$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();

anything better ?

---

no no no, since the question/answer become and plugin ti great... but doesn't work anymore...

here is the bug... I like to call the plugin (tablerize) when the click event is toggle and REPLACE THE WHOLE UL by the table... which it dont do

Here is the little snippet of code :

<script type="text/javascript">
    $(document).ready(function() {

        $('#texte > h1').next().hide(500);  
        $('#texte > h1').click(function() {
        $(this > ul).tablerize();
        $(this).toggle(500);
        });
    });
</script>

not surprising it dont work.. I screw something for sure... and I tweek the plugin with no luck !...

I really like to keep that code:

$("texte").append('<div id="where_my_table_goes"></div>');
$(#where_my_table_goes"></div>').append(table);
$('#my_oddly_formatted_list').remove();

that can become:

remove the ul
append the div to (this)
put the table into that div

do I even need a div ?

HELP!

---

It doesn't work; here is the full page, maybe it will help a lot to SEE what it should do

http://www.acecrodeo.com/new/04-classement.php

I use the delay to hide just to see that the data is there...

after pressing on the title.. the tablerize should happend, delete the old ul and renplace it with the table, and the slidetoggle it

---

Ok.. there is the state now...

I know only to edit a answer and post it... no update button anywhere..

I like to give you a thumb up or anything that can help your rating... I just don't know how

For the problem... I have post exacly what you give to me.. and it dont work... let see the link : http://www.acecrodeo.com/new/04-classement.php

here is the bug : it toggle the header...

I am so lost !

Answer 1

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.