Drehen Sie ungeordnete Liste in eine Tabelle mit jQuery

Question

Ich mag einen <ul><li> bekommen und es ist ein schöner Tisch mache ich mit CSS-Stil werde.

Ich mag die Transformation mit jQuery gemacht werden

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

auf und ....

und einen Tabellenkopf macht mit der ersten Zeile der <ul> und Tabellenzelle mit den anderen ...

Es wird vielleicht 4-5 <ul>s auf der Seite sein.

Um Vereisung auf den Kuchen hinzuzufügen, lassen Sie sortieren sie von dem größten Verdiener auf den kleinsten!

---

Ich habe diese Frage gefunden:

  

Wie HTML-Tabelle zu transformieren, mit JQuery zur Liste

es ist genau das Gegenteil ... aber vielleicht ein guter Anfang? Ich weiß nicht, werde ich es hier ... aber immer noch links die Frage weit offen.

---

Ich habe diese Frage gefunden:

  

Wie HTML-Tabelle zu transformieren, mit JQuery zur Liste

es ist genau das Gegenteil ... aber vielleicht ein guter Anfang? Ich weiß nicht, werde ich es hier ... aber immer noch links die Frage weit offen.

---

Eine weitere Frage an die Lösung im Zusammenhang ...

Wenn Ich mag zu „löschen“ die und ersetzen Sie es mit dem Tisch ..

Ich habe wie eine leere Tabelle machen ..

Hier ist der Code ... vielleicht auch nicht „optimiert“, aber es funktioniert

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

etwas besser?

---

nein nein nein, da die Frage / Antwort worden und Plug-ti toll ... aber nicht mehr funktioniert ...

Hier ist der Fehler ... Ich mag das Plugin nennen (tablerize), wenn das Click-Ereignis Toggle ist und die ganze UL durch die Tabelle REPLACE ... was es dont do

Hier ist der kleine Code-Snippet:

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

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

überraschend es nicht nicht arbeiten .. Ich Schraube etwas sicher ... und ich tweek das Plugin ohne Glück! ...

Ich mag wirklich, dass Code halten:

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

das kann werden:

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

brauche ich noch ein div?

HELP!

---

Es funktioniert nicht; hier ist die ganze Seite, vielleicht wird es helfen, eine Menge zu sehen, was es tun sollte

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

Ich verwende die Verzögerung nur zu verstecken, um zu sehen, dass die Daten dort sind ...

nach dem Einschalten des Titels drücken .. die tablerize sollte passiert, löschen Sie die alte ul und renplace es mit dem Tisch, und die slidetoggle es

---

Ok .. es ist der Staat nun ...

Ich weiß nur, eine Antwort zu bearbeiten und per Post ... keine Update Taste irgendwo ..

Ich mag, um Ihnen einen Daumen nach oben oder etwas, das Ihre Bewertung helfen kann ... Ich weiß einfach nicht, wie

Für das Problem ... Ich habe Post exacly, was du mir geben .. und es nicht arbeiten ... lassen Sie den Link sehen: http://www.acecrodeo.com/new/04-classement.php

Hier ist der Fehler: den Header wechseln ...

Ich bin so verloren!

Answer 1

Dies ist, wie Sie es tun, wenn Sie HTML haben, die wie folgt aussieht:

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

Dann mit jQuery Sie ein Plugin wie folgt schreiben können:

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

, die Sie dann eine der folgenden Möglichkeiten nennen könnte:

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

Soweit das Sortieren und so weiter, gibt es viele Plugins zur Verfügung geben diese Funktionalität zu einer Tabelle.

** EDIT **

Das Problem mit Ihrem Code ist in diesen Zeilen:

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

Das tablerize Plugin schrieb ich erwartet ein <ul> Element tablerize. Wenn Sie übergeben es this Sie den h1 unterwegs sind, die abgestimmt wurde, nicht die <ul>. Wenn Sie diese Zeile ersetzen:

$(this).tablerize();

Mit dieser Linie, die das UL-Element unmittelbar nach dem Header finden:

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

Es sollte funktionieren, wie Sie möchten.

Auch:

• Ihre Frage zu aktualisieren, klicken Sie einfach auf ‚Bearbeiten‘ und fügen Sie in was auch immer Sie wollen.
• Geben Sie eine Antwort zu übernehmen, klicken Sie auf den Scheck links von diesem Text.