Развернуть и свернуть в строке таблицы

0

У меня есть таблица, которая в настоящее время генерируется со стороны сервера, и это выглядит как это.

Теперь необходимо скрыть весь столбец категории B, удалить повторяющиеся строки для категории A и отобразить записи соответствующих записей категории B с расширением-сбойным способом. Каждая ячейка столбца A1 Name будет иметь кнопку расширения, и когда она будет нажата, записи столбцов B этой строки будут показаны ниже.

Я могу скрыть категорию B и удалить повторяющиеся строки

var hide_duplicate_row = function () {
            var seen = {};
            $('td:nth-child(2)').each(function () {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).closest('tr').hide();
                else
                    seen[txt] = true;
            });
        };


var show_only_head = function(){
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(3),th:nth-child(3)').hide();
}

hide_duplicate_row();
show_only_head();

Сценарий: http://jsfiddle.net/ME3kG/3/

но я застрял с частью разворачивания разворота, как я могу заполнить данные строки категории B таким образом? Любой вход на это будет оценен, спасибо.

Полная таблица:

Изображение 174551

Желаемая таблица:

Изображение 174551

  • 0
    Как насчет использования rowspan ?
  • 0
    @Chankey, не могли бы вы подтвердить, что вы должны сохранить сгенерированный сервером код и вам нужно сгенерировать нужную таблицу, используя только jQuery?
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Вот план для этого:

Проходит по строкам таблицы один за другим:

$('table tr').each(function () {

В каждой строке получите требуемый контент:

var cell_3 = $("td:nth-child(3)", this).html(); // a3
var cell_4 = $("td:nth-child(4)", this).html(); // a4

Пока вы все еще обрабатываете текущую строку, измените столбец A1 следующим образом:

$( "td:nth-child(1)", this ).append( '<div class="toggle">' + cell_3 + ' - ' + cell_4 + '</div>' );

Теперь вы должны иметь вновь созданный DIV в каждом столбце A1. Вам нужно будет назначить функцию переключения на событие "щелчок", и вы должны сделать это. Конец.

Кажется, вы разрабатываете с помощью jQuery, и это повод объяснить вам идею, а не дать вам точный код. :-)

ИЗМЕНИТЬ 1:

Вот окончательный код, в соответствии с несколькими конкретными требованиями: http://jsfiddle.net/ME3kG/26/ и некоторым форматированием: http://jsfiddle.net/ME3kG/30/

  • 0
    Спасибо, проверь что я попробовал по твоей логике . Я получаю сообщение об ошибке в строке 32. Пожалуйста, дайте мне знать, как я могу выбрать тег span внутри td ?
  • 0
    Хорошо, давайте сначала проверим это: jsfiddle.net/ME3kG/9 - Я изменил HTML, так как мне показалось, что в элементах th отсутствуют пропущенные буквы «tr». Это правильный HTML или мы ДОЛЖНЫ использовать ваш (без 'th')?
Показать ещё 5 комментариев
0

Добавьте div в ваш td, который скрыт onload и отображает его на событии клика

Ещё вопросы

Сообщество Overcoder
Наверх
Меню