Как ссылаться на атрибут данных другого элемента?

Question

Я пытаюсь создать отзывчивую таблицу, которая рушится от горизонтальной до вертикальной. Для этого я использую псевдоэлемент :before, который получает его значение из атрибута данных. Рассмотрим следующий РОМ структуру:

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> 
 

 

 

 

Это работает отлично и хорошо, пока вы не поймете, что вы должны написать каждый данных-атрибут вручную, так как каждая новая строка данных требует атрибут данных.

В идеале я хотел бы иметь что-то вроде этого:

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> 
 

 

где я ссылающийся на данные-атрибут th -nodes. Теперь, насколько я знаю, нет никакого способа ходить dom-tree с только css, поэтому я предполагаю, что это будет возможно только с помощью javascript. Тем не менее, я никогда не использовал атрибут data, поэтому я надеюсь, что я ошибаюсь в этом.

Могу ли я работать с (в порядке убывания предпочтения): только css, php, javascript?

Answer 1

Не думайте, что вы можете сделать это с помощью CSS, вы, вероятно, можете использовать несколько иной подход, если используете jQuery, так же, как вы можете использовать идентификатор, чтобы найти значения из заголовка и записать его в тело, например.

<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

Надеемся, что это дает альтернативное представление о том, как вы могли бы перебрать данные и захватить по-другому.