Rotate an unordered list into a table using jQuery

Question

I like to get <ul><li>and make it a beautiful table, which I will use with CSS.

I like the transformation I need to do with jQuery

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

incl. and more ....

and make the table head with the first row <ul>and the table cell with the others ...

The page will probably be 4-5 <ul>.

To add icing to the cake, release it from the largest scientist to the smallest!

---

I found this question:

How to convert HTML table to list using jQuery?

it's exactly the opposite ... but maybe a good start? I don’t know, I’ll check it ... but still left the question wide open.

---

I found this question:

How to convert HTML table to list using jQuery?

it's exactly the opposite ... but maybe a good start? I don’t know, I’ll check it ... but still left the question wide open.

---

Another question related to the solution ...

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

.

... , "",

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

- ?

---

no no no, / ti ... ...

... (tablerize), click UL ...,

:

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

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

, . - ... tweek !...

:

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

:

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

div?

HELP!

---

; , , ,

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

, , , ...

. tablerize , ul , slidetoggle -

---

.. ...

, ... .

-, ... ,

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

: ...

!

Answer 1

, HTML, :

<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>

jQuery :

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

:

// 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();

.., plugins, .

** **

:

$(document).ready(function() {
    /*$('#texte > h1').next().hide(1000); */ 
    $('#texte > h1').click(function() {
        $(this).tablerize();
        /*$(this).next().toggle(500);*/
    });
});

tablerize, , , <ul> . this, h1, , <ul>. :

$(this).tablerize();

, UL :

$(this).next('ul').tablerize();

, .

:

• , "" , .
• , .