views:

1377

answers:

10

Hi, 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.

+1  A: 

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.

marc-andre menard
+8  A: 

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.
Paolo Bergantino
A: 

Wow, that was fast... maybe something you have done before?

i will try to get it to work in my code, but look pretty good as is..

as far as the pay, i not paid enough myself, and i try to make learning and working go well together... i can give you two thumb up !

I can only thanks you very much for the time you take to answer my problem god bless you

mam

marc-andre menard
I updated my question to show how to do it to many UL elements and such. As far as the pay, I was joking. :)
Paolo Bergantino
An up-vote would be a decent substitute... or make it the Answer
hunter
A: 

Another question related to the solution...

If i like to "delete" the and remplace it with the table..

i dont like to make an empty table..

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

$('#texte').append(''); $('#where_my_table_goes').append(table); $('#my_oddly_formatted_list').remove();

anything beter ?

marc-andre menard
I'm sorry, I'm not sure what you mean. What are you trying to create? The tables are being created already, the append is being done to the element where the tables will show. The remove for the list should work fine.
Paolo Bergantino
A: 

The question is not an hour old and it already a plugin wooooouuuou !

marc-andre menard
A: 

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

here is the bug... i like to call the plugin (tablerize) when the clic event is toggle and REMPLACE THE WHOLE UL by the table... wich it dont do

Here is the little snippet of code :

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

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(''); $(#where_my_table_goes">').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!

marc-andre menard
I updated my answer so it does what you want. You don't need the div if you want the UL to be replaced by the table. Use the updated plugin in my answer and it should work with the code you provided. (I tested it and it does)
Paolo Bergantino
By the way you should really update your question with updates, not post answers as they are not really answers.
Paolo Bergantino
A: 

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

marc-andre menard
Replace the tablerize code with the exact code in my post above...
Paolo Bergantino
A: 

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 dont now 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 ! :-(

marc-andre menard
I updated my answer with how to fix your problem.
Paolo Bergantino
A: 

Hourra !... as you sait it work...

I dont write jquery a lot, so i not as good as your are...

If i only buy one book to teach me jquery... what will be your suggestion ?

Thanks, really you made my day

Mam

marc-andre menard
No book, just read the documentation. Also, I don't know how many times I have to say this but you should not post comments/updates as answers. Use 'edit' in your post.
Paolo Bergantino
i will clean everything.. if i only know how to delete my answer !
marc-andre menard
A: 

everything fine now, thanks !

marc-andre menard