У меня есть таблица, которая в настоящее время генерируется со стороны сервера, и это выглядит как это.
Теперь необходимо скрыть весь столбец категории 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 таким образом? Любой вход на это будет оценен, спасибо.
Полная таблица:
Желаемая таблица:
Вот план для этого:
Проходит по строкам таблицы один за другим:
$('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/
span
внутри td
?
Добавьте div в ваш td, который скрыт onload и отображает его на событии клика
rowspan
?