Вертикальная таблица html без повторяющихся тегов

Question

Я генерирую таблицу с помощью xslt, но для этого вопроса я оставлю эту сторону, поскольку она больше относится к фактической сгенерированной структуре таблицы html. Что я делаю, это сделать вертикальную таблицу следующим образом, которая подходит для макета, необходимого для данных, которые возникли в электронной таблице. Пример изобретателен для краткости, фактические поля данных содержат длинные строки и много других полей.

 
Title: something or rather bla bla 
Description: very long desription 
Field1: asdfasdfasdfsdfsd 
Field2: asdfasfasdfasdfsdfjasdlfksdjaflk 

Title: another title 
Description: another description 
Field1: 
Field2: my previous field was blank but this one is not, anyways 

и т.д.
Единственный способ до сих пор я нашел для создания такой HTML таблицы используют повторяющиеся тег для каждого поля и каждой запись, например:

<tr><th>Title</th><td>something or rather bla bla</td></tr> 
<tr><th>Description</th><td>very long desription</td></tr> 
... 
<tr><th>Title</th><td>another title</td></tr> 
<tr><th>Description</th><td>another description</td></tr> 
... 

Конечно, это семантический неверный, но дает правильный визуальный макет. Мне нужно, чтобы он был семантически корректным html, поскольку это единственный разумный способ более позднего прикрепления фильтрующего javascript объекта. Следующая правильно семантически производит чрезвычайно широкую таблицу с одним набором заголовков полей слева:

<tr><th>Title</th><td>something or rather bla bla</td><td>another title</td></tr> 
<tr><th>Description</th><td>very long desription</td><td>another description</td></tr> 
... 

Итак, подведем итог, нужно HTML таблицу (или другой HTML структура), где это одна запись под другим (визуально) с повторением заголовков полей, но заголовки полей не должны повторяться в реальном коде, потому что это приведет к сбою любой фильтрации на основе записи, которая будет добавлена ​​позже.

Answer 1

Yo. Спасибо за то, что вы обновили свой вопрос и включили некоторый код. Как правило, вы также публикуете то, что пытались исправить эту проблему, но я достаточно доволен этой записью.

Поскольку вы хотите повторять заголовки в вертикальной компоновке (не то, что я видел часто, но я могу понять это желание), у вас нет , у меня есть, чтобы изменить форматирование HTML, просто используйте немного больше JavaScript для выясните это. Я не прошел проверку и не проверял, эффективно ли я делаю (возможно, нет, поскольку существует так много циклов), но в моем тестировании следующее может присоединяться к вертикальной таблице и фильтровать с использованием пары переменных для указания количества строк в каждой записи.

Во-первых, вот HTML, с которым я тестирую этот. Обратите внимание, у меня есть div с id из filters, и каждый из моих фильтров входов имеет пользовательский атрибут с именем filter, соответствующий заголовок строк, которые они должны фильтровать:

<div id='filters'> 
    Title: <input filter='Title'><br> 
    Desc: <input filter='Description'> 
</div> 
<table> 
    <tr><th>Title</th><td>abcd</td></tr> 
    <tr><th>Description</th><td>efgh</td></tr> 
    <tr><th>Title</th><td>ijkl</td></tr> 
    <tr><th>Description</th><td>mnop</td></tr> 
    <tr><th>Title</th><td>ijkl</td></tr> 
    <tr><th>Description</th><td>mdep</td></tr> 
    <tr><th>Title</th><td>ijkl</td></tr> 
    <tr><th>Description</th><td>mnop</td></tr> 
    <tr><th>Title</th><td>ijkl</td></tr> 
    <tr><th>Description</th><td>mnop</td></tr> 
</table> 

Вот переменные, которые я использую в старт:

var filterTable = $('table'); 
var rowsPerEntry = 2; 
var totalEntries = filterTable.find('tbody tr').size()/rowsPerEntry; 
var currentEntryNumber = 1; 
var currentRowInEntry = 0; 

И этот маленький цикл будет добавить класс для каждой записи (на основе rowsPerEntry как показано выше), чтобы сгруппировать строки вместе (таким образом все строки для записи могут быть выбраны совместно с классом селектор в jQuery):

filterTable.find('tbody tr').each(function(){ 
    $(this).addClass('entry' + currentEntryNumber); 
    currentRowInEntry += 1; 
    if(currentRowInEntry == rowsPerEntry){ 
    currentRowInEntry = 0; 
    currentEntryNumber += 1; 
    } 
}); 

И магия; на клавиатуре для фильтров выполняется цикл через общее количество записей, затем вложенный цикл через фильтры, чтобы определить, не соответствует ли эта запись входному сигналу фильтра. Если любое поле для записи не соответствует соответствующему значению фильтра, мы добавим номер записи в наш массив hide и двигаемся вперед.После того, как мы определили, какие элементы должны быть скрыты, мы можем показать все записи, и скрыть конкретные те, которые должны быть скрыты:

$('#filters input').keyup(function(){ 
    var hide = []; 
    for(var i = 0; i < totalEntries; i++){ 
    var entryNumber = i + 1; 
    if($.inArray(entryNumber, hide) == -1){ 
     $('#filters input').each(function(){ 
     var val = $(this).val().toLowerCase(); 
     var fHeader = $(this).attr('filter'); 
     var fRow = $('.entry' + entryNumber + ' th:contains(' + fHeader + ')').closest('tr'); 
     if(fRow.find('td').text().toLowerCase().indexOf(val) == -1){ 
      hide.push(entryNumber); 
      return false; 
     } 
     }); 
    } 
    } 
    filterTable.find('tbody tr').show(); 
    $.each(hide, function(k, v){ 
    filterTable.find('.entry' + v).hide(); 
    }); 
}); 

Это не шедевр, но я надеюсь, что это будет вам начать вниз правильный путь.

Вот скрипка тоже: https://jsfiddle.net/bzjyfejc/