Tabla html vertical sin repetir tags th

Estoy generando una tabla usando xslt, pero para esta pregunta mantendré ese lado fuera de ella, ya que se relaciona más con la estructura real generada de una tabla html. Lo que hago es hacer una tabla vertical de la siguiente manera, que se adapte al diseño necesario para los datos en cuestión que se originaron en una hoja de cálculo. El ejemplo está diseñado para ser breve, los campos de datos reales contienen cadenas largas y muchos más campos.

 Título: algo o más bien bla bla Descripción: desripción muy larga Campo1: asdfasdfasdfsdfsd Campo2: asdfasfasdfasdfsdfjasdlfksdjaflk Título: otro título Descripción: otra descripción Campo1: Campo2: mi campo anterior estaba en blanco, pero este no está, de todos modos 

etc.
Hasta ahora, la única forma que encontré para generar dicha tabla html es mediante la repetición de tags para cada campo y cada registro, por ejemplo:

Titlesomething or rather bla bla Descriptionvery long desription ... Titleanother title Descriptionanother description ... 

Por supuesto, esto es semánticamente incorrecto pero produce un diseño visual correcto. Necesito que sea html semánticamente correcto, ya que esa es la única forma sensata de adjuntar una función de javascript de filtrado. El siguiente semántico correcto produce una tabla extremadamente ancha con un solo conjunto de encabezados de campo a la izquierda:

 Titlesomething or rather bla blaanother title Descriptionvery long desriptionanother description ... 

Entonces, para resumir, necesita una tabla html (u otra estructura html) donde se encuentre un registro debajo de otro (visualmente) con encabezados de campo repetidos, pero los encabezados de campo no deben repetirse en el código real porque eso destruiría cualquier filtrado basado en registros que se agregaría mas tarde.

Yo. Gracias por actualizar tu pregunta, e incluir algún código. Normalmente, también publicaría lo que intentó corregir este problema, pero estoy lo suficientemente satisfecho con esta publicación.

Ya que quiere que los encabezados se repitan en diseño vertical (no es algo que haya visto a menudo, pero puedo entender el deseo), no tiene que modificar el formato HTML, solo use un poco más de JavaScript para averiguarlo. No he revisado para ver si estoy haciendo las cosas de manera eficiente (probablemente no, ya que hay muchos bucles), pero en mis pruebas, lo siguiente puede adjuntarse a una tabla vertical y filtrar utilizando un par de variables para indicar cuantas filas hay en cada entrada.

En primer lugar, aquí está el HTML con el que estoy probando. Tenga en cuenta que tengo un div con el id de los filters , y cada una de mis entradas de filtro tiene un atributo personalizado llamado filter que coincide con el encabezado de las filas que se supone que deben filtrar:

 
Title:
Desc:
Titleabcd
Descriptionefgh
Titleijkl
Descriptionmnop
Titleijkl
Descriptionmdep
Titleijkl
Descriptionmnop
Titleijkl
Descriptionmnop

Aquí están las variables que uso al comienzo:

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

Y este pequeño bucle agregará una clase para cada entrada (basada en rowsPerEntry como se ve arriba) para agrupar las filas (de esta manera todas las filas para una entrada se pueden seleccionar junto con un selector de clase en jQuery):

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

Y la magia; en el teclado, los filtros ejecutan un bucle a través del número total de entradas, luego un bucle nested a través de los filtros para determinar si esa entrada no coincide con la entrada de ninguno de los filtros. Si alguno de los campos de la entrada no coincide con el valor de filtro correspondiente, entonces agregamos el número de entrada a nuestra matriz de hide y seguimos adelante. Una vez que hayamos determinado qué entradas deben ocultarse, podemos mostrar todas las entradas y ocultar las que se deben ocultar:

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

No es una obra maestra, pero espero que te ayude a iniciar el camino correcto.

Aquí también hay un violín: https://jsfiddle.net/bzjyfejc/