没有重复th标记的垂直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

呦。感谢您更新您的问题，并包括一些代码。通常情况下，您还会发布您尝试纠正此问题的内容 - 但我对此帖很满意。

既然你想要垂直布局中的重复标题（不是我经常见到的东西，但我能理解的愿望），你不要有来修改HTML格式，只需使用更多的JavaScript想办法。我没有通过检查，看看我是否有效地做事（我可能不是，因为有很多循环），但在我的测试中，以下内容可以附加到垂直表并使用一些变量进行过滤以指示每个条目中有多少行。

首先，这里是我测试这个的HTML。请注意，我有与filters的id一个div，和我的每一个过滤器的输入有一个名为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/