Vire lista não ordenada a uma tabela com jQuery

Question

Eu gosto de ter uma <ul><li> e torná-la uma bela mesa eu vou estilo com CSS.

Eu gosto da transformação a ser feito com jQuery

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

sobre e sobre ....

e fazer uma cabeça tabela com a primeira linha da célula <ul> e mesa com os outros ...

Haverá talvez 4-5 <ul>s na página.

Para adicionar cereja do bolo, vamos classificá-lo do maior fonte para o menor!

---

Eu encontrei esta pergunta:

Como transformar tabela HTML a lista com jQuery?

é exatamente o oposto ... mas talvez um bom começo? Eu não sei, vou verificá-la ... mas ainda deixou a questão amplamente aberto.

---

Eu encontrei esta pergunta:

Como transformar tabela HTML a lista com jQuery?

é exatamente o oposto ... mas talvez um bom começo? Eu não sei, vou verificá-la ... mas ainda deixou a questão amplamente aberto.

---

Outra questão relacionada com a solução ...

Se eu gosto de "apagar" o e substituí-lo com a tabela ..

Eu não gosto de fazer uma tabela vazia ..

aqui está o código ... talvez não "otimizado" mas trabalhar

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

melhor alguma coisa?

---

não não não, uma vez que a pergunta / resposta tornam-se e plug-in ti grande ... mas não funciona mais ...

aqui é o bug ... eu gosto de chamar o plugin (tablerize) quando o evento clique é de alternância e substituir a UL todo, a mesa ... que não fazem

Aqui está o pequeno trecho de código:

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

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

Não é de estranhar que não trabalham .. eu estragar alguma coisa com certeza ... e eu tweek o plugin sem sorte! ...

Eu realmente gosto de manter esse código:

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

que podem tornar-se:

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

que eu ainda preciso de uma div?

HELP!

---

Ele não funciona; aqui está a página inteira, talvez ele vai ajudar muito para ver o que ele deve fazer

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

Eu uso o atraso para esconder só para ver se os dados estão lá ...

depois de pressionar no título .. o tablerize deve aconteceu, exclua o antigo ul e renplace-lo com a tabela, eo slideToggle it

---

Ok .. não é o estado agora ...

Eu sei apenas para editar uma resposta e postá-lo ... nenhum botão de atualização em qualquer lugar ..

Eu gostaria de dar-lhe um polegar para cima ou para qualquer coisa que pode ajudar a sua classificação ... Eu só não sei como

Para o problema ... Eu tenho pós exacly o que você dá para mim .. e não trabalho ... vamos ver o link: http://www.acecrodeo.com/new/04-classement.php

aqui é o bug: é alternar o cabeçalho ...

Eu estou tão perdido!

Answer 1

Isto é como você fazer isso, se você tiver HTML que se parece com isso:

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

Em seguida, com jQuery você poderia escrever um plugin como este:

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

O que você poderia, então, ligar para qualquer uma das seguintes formas:

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

Quanto triagem e assim por diante, há muitos plugins disponível para dar essa funcionalidade para uma mesa.

EDIT ** **

O problema com o seu código é nestas linhas:

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

O tablerize plugin que eu escrevi espera um elemento <ul> para tablerize. Quando você passá-lo this você está passando o h1 que foi combinado, e não o <ul>. Se você substituir esta linha:

$(this).tablerize();

Com esta linha, que vai encontrar o elemento UL imediatamente após o cabeçalho:

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

Ele deve funcionar como você pretende.

Além disso:

• Para atualizar a sua pergunta, basta clicar em 'editar' e adicionar o que quiser.
• Para aceitar uma resposta, clique no cheque para a esquerda deste texto.