Tournez liste non numérotée à une table avec jQuery

Question

J'aime obtenir un <ul><li> et en faire une belle table je style avec CSS.

J'aime la transformation à effectuer avec jQuery

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

et ....

et faire une tête de table avec la première ligne de la cellule <ul> et une table avec les autres ...

Il y aura peut-être 4-5 <ul>s sur la page.

Pour ajouter le glaçage sur le gâteau, laissez-les trier du plus grand soutien économique au plus petit!

---

J'ai trouvé cette question:

  

Comment transformer table HTML à la liste avec JQuery?

il est exactement le contraire ... mais peut-être un bon point de départ? Je ne sais pas, je vais vérifier ... mais toujours laissé la question largement ouverte.

---

J'ai trouvé cette question:

  

Comment transformer table HTML à la liste avec JQuery?

il est exactement le contraire ... mais peut-être un bon point de départ? Je ne sais pas, je vais vérifier ... mais toujours laissé la question largement ouverte.

---

Une autre question liée à la solution ...

Si j'aime « supprimer » la remplacer par la table ..

Je n'aime pas faire une table vide ..

Voici le code ... peut-être pas « optimisé » mais il fonctionne

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

quelque chose de mieux?

---

non non non, puisque la question / réponse et devenir plug-in ti grande ... mais ne fonctionne plus ...

Voici le bug ... J'aime appeler le plugin (tablerize) lorsque l'événement click est bascule et remise en place UL ENTIER par la table ... dont il ne fais pas

Voici le petit bout de code:

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

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

pas surprenant qu'il ne fonctionnent pas .. Je visse quelque chose pour vous ... et je Tweek le plugin avec pas de chance! ...

J'aime vraiment garder ce code:

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

qui peut être:

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

ai-je besoin même un div?

AIDE!

---

Il ne fonctionne pas; voici la page complète, peut-être cela aidera beaucoup à voir ce qu'il doit faire

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

J'utilise le délai pour cacher juste pour voir que les données sont là ...

après avoir appuyé sur le titre .. la tablerize devrait happend, supprimer l'ancien ul et renplace avec la table et le slideToggle il

---

Ok .. il est maintenant l'état ...

Je sais que pour modifier une réponse et l'afficher ... pas de bouton de mise à jour partout ..

Je tiens à vous donner un pouce vers le haut ou tout ce qui peut aider votre note ... Je ne sais pas comment

Pour le problème ... Je poste exacly ce que tu me donnes .. et il ne fonctionnent pas ... laisser voir le lien: http://www.acecrodeo.com/new/04-classement.php

voici le bug: il bascule l'en-tête ...

Je suis tellement perdu!

Answer 1

Voici comment vous le faites, si vous avez HTML qui ressemble à ceci:

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

Ensuite, avec jQuery, vous pouvez écrire un plugin comme ceci:

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

Ce qui vous pourriez appeler l'une des façons suivantes:

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

En ce qui concerne le tri et ainsi de suite, il y a beaucoup de plugins disponibles donner cette fonctionnalité à une table.

** EDIT **

Le problème avec votre code est dans ces lignes:

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

Le plugin tablerize je l'ai écrit attend un élément de <ul> à tablerize. Lorsque vous passez ce que vous this passer le h1 qui a été égalé, pas le <ul>. Si vous remplacez cette ligne:

$(this).tablerize();

Avec cette ligne, qui trouvera l'élément UL immédiatement après l'en-tête:

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

Il devrait fonctionner comme vous le souhaitez.

Aussi:

• Pour mettre à jour votre question, il suffit de cliquer « modifier » et ajouter à ce que vous voulez.
• Pour accepter une réponse, vous cliquez sur le chèque à la gauche de ce texte.