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

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
</head>

<body>
  <table id="myTable">
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
    </tr>
    <tr>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
    <tr>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
  <br>

  <script>
    var x = document.getElementById("myTable").rows.length;
    alert("Number of rows in the table is " + x);
    console.log($("#myTable tr:has(td:empty + td:empty):first").index());
  </script>
</body>
</html>

当然这在语义上是不正确的，但会产生正确的视觉布局。我需要它在语义上正确的html，因为这是后来附加过滤javascript工具的唯一理智的方式。以下正确的语义生成一个非常宽的表，左侧有一组字段标题：

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

Answer 1

哟。感谢您更新问题，并提供一些代码。通常情况下，您也会发布您尝试纠正此问题的内容 - 但我对这篇文章表示满意。

由于您需要垂直布局中的重复标题（不是我经常看到的，但我能理解其中的愿望），您不能来修改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;
  }
});

神奇的; on过滤器的keyup运行循环遍历条目总数，然后通过过滤器嵌套循环以确定该条目是否与过滤器的输入不匹配。如果条目的任一字段与相应的过滤器值不匹配，那么我们将条目号添加到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/

垂直html表，不重复th标签

1 个答案: