Question

我正在尝试创建一个响应表，从水平布局到垂直布局折叠。为此，我使用:before伪元素，从数据属性获取其值。考虑以下dom结构：

＆＃13;

td:before {
      content: attr(data-th);
    }

＆＃13;

<table>
      <thead>
        <tr>
          <th>First</th>
          <th>Second</th>
          <th>Third</th>
          <th>Fourth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="First">Alpha</td>
          <td data-th="Second">Beta</td>
          <td data-th="Third">Gamma</td>
          <td data-th="Fourth">AnotherGreekLetter</td>
        </tr>
      </tbody>
</table>

＆＃13;

这很好用，直到你意识到，你必须手动编写每一个数据属性，因为每一行新数据都需要数据属性。

理想情况下，我想要这样的事情：

＆＃13;

td:before:nth-of-type(4n+1) {
      content: attr(data-th:nth-of-type(4n+1));
}
    
    td:before:nth-of-type(4n+2) {
      content: attr(data-th:nth-of-type(4n+2));
}

＆＃13;

<table>
      <thead>
        <tr>
          <th data-th="First">First</th>
          <th data-th="Second">Second</th>
          <th data-th="Third">Third</th>
          <th data-th="Fourth">Fourth</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alpha</td>
          <td>Beta</td>
          <td>Gamma</td>
          <td>AnotherGreekLetter</td>
        </tr>
      </tbody>
</table>

＆＃13;

我在哪里引用th - 节点的数据属性。现在，据我所知，没有办法只用css 行走 dom-tree，所以我认为这只能通过javascript实现。然而，我从未使用过数据属性，所以我希望我错了。

我可以使用（按优先级降序排列）：只有css，php，javascript吗？

Answer 1

不要认为你可以通过CSS做到这一点，如果你使用jQuery，你可能会使用稍微不同的方法，因为你可以使用ID来定位标题中的值并将其写入正文，例如< / p>

<table>
  <thead>
    <tr data-id="1">
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"></tr>
  </tbody>
</table>

和jQuery：

$(document).ready(function() {
    $("thead tr th").each(function( index ) {
      $("tbody tr[data-id='" + $(this).parent().attr('data-id') + "']").append('<td>' + $(this).text() + '</td>');      
    });
});

http://codepen.io/anon/pen/kXdkyY

希望这能为您提供另一种选择，让您了解如何以不同的方式遍历和获取数据。

如何引用另一个元素的数据属性？

1 个答案: