Превратить неупорядоченный список в таблицу с помощью jQuery - PullRequest
Новая
       28

Превратить неупорядоченный список в таблицу с помощью jQuery

3 голосов
/ 24 февраля 2009

Мне нравится получать <ul><li> и делать из него хорошую таблицу, которую я буду стилизовать с помощью CSS.

Мне нравится преобразование с помощью jQuery 

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

и дальше ....

и создайте заголовок таблицы с первой строкой <ul> и ячейку таблицы с остальными ...

На странице может быть 4-5 <ul> с.

Чтобы добавить глазурь к пирогу, рассортируйте его от самого крупного получателя до самого маленького!

Я нашел этот вопрос:

Как преобразовать таблицу HTML в список с помощью JQuery?

это как раз наоборот ... но может быть хорошее начало? Я не знаю, я проверю это ... но все же оставил вопрос широко открытым.

Я нашел этот вопрос:

Как преобразовать таблицу HTML в список с помощью JQuery?

это как раз наоборот ... но может быть, хорошее начало? Я не знаю, я проверю это ... но все же оставил вопрос широко открытым.

Еще один вопрос, связанный с решением ...

Если мне нравится "удалить" и заменить его на таблицу ..

Мне не нравится делать пустую таблицу ..

вот код ... возможно, не "оптимизирован", но он работает 

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

что лучше?

нет нет нет, так как вопрос / ответ стал и плагин очень хорош ... но больше не работает ...

вот ошибка ... Мне нравится вызывать плагин (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>

не удивительно, что это не работает .. Я что-то наверняка прикручиваю ... и я безуспешно настраиваю плагин!

Мне действительно нравится хранить этот код: 

$("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

Я использую задержку, чтобы скрыть, просто чтобы увидеть, что данные есть ...

после нажатия на заголовок .. таблица должна произойти, удалить старый ul и переместить его в таблицу, а слайд переключить

Ладно .. теперь есть государство ...

Я знаю только, чтобы отредактировать ответ и опубликовать его ... нигде нет кнопки обновления ..

Я хотел бы дать вам большой палец или что-нибудь, что может помочь вашему рейтингу ... Я просто не знаю, как

По проблеме ... У меня есть сообщение, которое вы мне даете точно ... и оно не работает ... позвольте увидеть ссылку: http://www.acecrodeo.com/new/04-classement.php

вот ошибка: она переключает заголовок ...

Я так потерян!

1 Ответ

10 голосов
/ 24 февраля 2009

Вот как вы это делаете, если у вас есть 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();

Что касается сортировки и т. Д., Существует множество плагинов , доступных для предоставления этой функциональности таблице.

** РЕДАКТИРОВАТЬ **

Проблема с вашим кодом в следующих строках: 

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

Это должно работать так, как вы намереваетесь.

Также:

  • Чтобы обновить свой вопрос, просто нажмите «изменить» и добавьте все, что вы хотите.
  • Чтобы принять ответ, нажмите на флажок слева от этого текста.
...