垂直的html表格不重复th标签 [英] Vertical html table without repeating th tags

问题描述

我使用xslt生成一个表格，但是对于这个问题，我会把它放在它之外，因为它更多地涉及到html表格的实际生成结构。
我所做的是制作一个垂直表，如下所示，它适合于源自电子表格的相关数据所需的布局。示例是为了简洁起见，实际的数据字段包含冗长的字符串和更多的字段。

I'm generating a table using xslt, but for this question I'll keep that side out of it, as it relates more to the actual generated structure of a html table. What I do is make a vertical table as follows, which suits the layout needed for the data concerned that originated in a spreadsheet. Example is contrived for brevity, actual data fields contain lengthy strings and many more fields.

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表格是使用重复标记为每个字段和每个记录，例如：


$ b

etc.
The only way so far I found to generate such a html table is using repeating tags for every field and every record e.g.:

<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设施的唯一理智的方式。
以下语法正确地生成了一个非常宽的表格，左边有一组字段标题：

Of course this is semantically incorrect but produces correct visual layout. I need it to be semantically correct html, as that's the only sane way of later attaching a filtering javascript facility. The following correct semantically produces an extremely wide table with a single set of field headers on the left:

<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结构）它在一个记录下（可视地）重复字段标题下，但是字段标题不能在实际代码中重复，因为这会破坏后面添加的任何基于记录的过滤。

So to summarise, need a html table (or other html structure) where it's one record under another (visually) with repeating field headers, but the field headers must not be repeated in actual code because that would wreck any record based filtering to be added later on.

推荐答案

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

Yo. Thanks for updating your question, and including some code. Typically you'd also post what you've tried to correct this issue - but I'm satisfied enough with this post.

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

Since you want the repeating headers in vertical layout (not something I've seen often, but I can understand the desire), you don't have to modify the HTML formatting, just use a bit more JavaScript to figure it out. I haven't gone through and checked to see if I'm doing things efficiently (I'm probably not, since there are so many loops), but in my testing the following can attach to a vertical table and filter using a couple variables to indicate how many rows there are in each entry.

首先，这里是我测试这个的HTML。注意我有 div ，其中 id filters ，并且我的每个过滤器输入都有一个名为 filter 的自定义属性，它与它们应该过滤的行的标题匹配：

Firstly, here's the HTML I'm testing this one with. Notice I have a div with the id of filters, and each of my filter inputs has a custom attribute named filter that matches the header of the rows they are supposed to 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>

以下是我在开始时使用的变量：

Here are the variables I use at the start:

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

此循环将为每个条目添加一个类（基于上面的rowsPerEntry）将这些行分组在一起（这样，一个条目的所有行都可以与jQuery中的类选择器一起选择）：

And this little loop will add a class for each entry (based on the rowsPerEntry as seen above) to group the rows together (this way all rows for an entry can be selected together with a class selector in jQuery):

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

和魔法;在过滤器的过滤器上运行一个遍历整个条目的循环，然后通过过滤器进行嵌套循环，以确定该条目是否与过滤器的输入不匹配。如果条目的任何一个字段与相应的过滤器值不匹配，那么我们将条目编号添加到我们的 hide 数组中并随后移动。一旦我们确定应该隐藏哪些条目，我们可以显示所有条目，并隐藏应隐藏的特定条目：

And the magic; on keyup for the filters run a loop through the total number of entries, then a nested loop through the filters to determine if that entry does not match either filter's input. If either field for the entry does not match the corresponding filter value, then we add the entry number to our hide array and move along. Once we've determined which entries should be hidden, we can show all of the entries, and hide the specific ones that should be hidden:

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

这不是杰作，但我希望它能让您开始走上正确的道路。

It's no masterpiece, but I hope it'll get you started down the right path.

这里还有一个小提琴： https://jsfiddle.net/bzjyfejc/

Here's a fiddle too: https://jsfiddle.net/bzjyfejc/

这篇关于垂直的html表格不重复th标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！