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

Question

I am trying to create a responsive table, that collapses from a horizontal to a vertical layout. For that I use a :before pseudo-element, that gets its value from a data attribute. Consider the following dom-structure:

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

<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>



    

This works fine and well, until you realize, that you have to write every single data-attribute by hand, since every new row of data requires the data-attribute.

Ideally I would like to have something like this:

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));
}

<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>

    

where I am referencing the data-attribute of the th-nodes. Now, as far as I know, there is no way of walking the dom-tree with just css, so I assume this would only be possible with javascript. Yet, I have never made use of the data-attribute, so I am hoping that I am wrong about that.

Can I make this work with (in descending order of preference): only css, php, javascript?

</div>

Answer 1

Don't think you can do this via CSS, you could probably use a slightly different approach if using jQuery too as you could use an ID to locate the values from the header and write it out to the body e.g.

<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>

And the 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

Hopefully this gives you an alternative idea of how you could loop through and grab data in a different way.