Превратите неупорядоченный список в таблицу с помощью jQuery
https://stackoverflow.com/questions/582082
-
06-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
мне нравится получать <ul><li> и сделайте красивую таблицу, которую я оформлю с помощью CSS.
Мне нравится, что преобразование выполняется с помощью jQuery.
* Place|Name|Earning
* 1|Paul|200$
* 2|Joe|400$
* 3|James|100$
* 4|Carl|1000$
снова и снова....
и создайте заголовок таблицы с первой строкой <ul> и ячейка таблицы с остальными...
Их будет, наверное, 4-5 <ul>s на странице.
Чтобы добавить глазури к торту, давайте отсортируем его от самого большого добытчика к самому маленькому!
Я нашел этот вопрос:
это с точностью до наоборот...но, может быть, хорошее начало?Не знаю, я проверю...но все же оставил вопрос широко открытым.
Я нашел этот вопрос:
это с точностью до наоборот...но, может быть, хорошее начало?Не знаю, я проверю...но все же оставил вопрос широко открытым.
Еще вопрос, связанный с решением...
Если мне нравится «удалить» и заменить его таблицей..
Не люблю делать пустой стол..
вот код...возможно, не «оптимизировано», но это работает
$('#texte').append('<div id="where_my_table_goes"></div>');
$('#where_my_table_goes').append(table);
$('#my_oddly_formatted_list').remove();
что-нибудь лучше?
нет-нет-нет, так как вопрос/ответ стал и плагин отличный...но уже не работает...
вот в чем ошибка...Мне нравится вызывать плагин (tablerize), когда событие щелчка переключается, и ЗАМЕНЯТЬ ВЕСЬ 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?
ПОМОЩЬ!
Это не работает;вот полная страница, возможно, это очень поможет ПОСМОТРЕТЬ, что она должна делать
http://www.acecrodeo.com/new/04-classement.php
Я использую задержку, чтобы скрыться, просто чтобы увидеть, что данные там...
после нажатия на заголовок..Таблизация должна произойти, удалите старый ul и замените его таблицей, а затем переключите ее.
Хорошо..сейчас есть государство...
Я знаю только, чтобы отредактировать ответ и опубликовать его...кнопки обновления нигде нет..
Я хотел бы поставить вам большой палец вверх или что-нибудь, что может помочь вашему рейтингу...Я просто не знаю, как
По проблеме...У меня есть пост именно о том, что вы мне даете..и это не работает...давайте посмотрим ссылку: http://www.acecrodeo.com/new/04-classement.php
вот ошибка:он переключает заголовок...
Я так потерян!
Решение
Вот как это сделать, если у вас есть 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();
Это должно работать так, как вы задумали.
Также:
- Чтобы обновить свой вопрос, просто нажмите «Изменить» и добавьте все, что хотите.
- Чтобы принять ответ, нажмите на галочку слева от этого текста.
