Блог

У меня возникла проблема с плагином WordPress, который создает таблицу, но оставляет информацию о ней на мобильном телефоне. Я хочу, чтобы текст/данные «data-th» отображались перед данными таблицы.

Пример того, чего я хочу достичь

<*h4 class="someClassName">Article Name</h4*><br>BBD4<br><*h4 class="someClassName2">NFF</h4*><br>000-0000
и т.д.

Я хочу использовать jQuery для захвата data-th и вставки («.табличное значение»).перед.

 <tr id="table-row-576" class="table-row even" role="row">
<td data-th="Article name" class="table-value-at table-value">BBD482</td>
<td data-th="NFF" class="table-value-at table-value">111-0000</td>
<td data-th="Width" class="table-value-at table-value">250 - 370 mm</td>
<td data-th="weight" class="table-value-at table-value">13 kg</td>
<td data-th="Quantity" class="table-value-qt table-value"></td>
</tr>
 

Рассмотрим следующее решение CSS.

 @media only screen and (max-device-width: 480px) {
  table.myTable thead th {
    display: block;
  }
} 

 <table class="myTable">
  <thead>
    <tr>
      <th>Article Name</th>
      <th>NFF</th>
      <th>Width</th>
      <th>Weight</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="table-row-576" class="table-row even" role="row">
      <td data-th="Article name" class="table-value-at table-value">BBD482</td>
      <td data-th="NFF" class="table-value-at table-value">111-0000</td>
      <td data-th="Width" class="table-value-at table-value">250 - 370 mm</td>
      <td data-th="weight" class="table-value-at table-value">13 kg</td>
      <td data-th="Quantity" class="table-value-qt table-value"></td>
    </tr>
  </tbody>
</table> 

Чтобы увидеть это в действии, отобразите фрагмент целиком на странице, а затем измените размер окна. Как только он станет меньше 480 пикселей, как у мобильного телефона, он сделает каждый из них блочным дисплеем, поэтому каждый из них находится на своей отдельной линии.

Вы также можете сделать это с помощью jQuery. Это просто требует события для проверки window document ширины или. CSS просто сделает это, несмотря ни на что.

В WordPress часто лучше всего создавать стандартные HTML-элементы. Поэтому, если вы создаете таблицу с помощью jQuery, обязательно создайте все необходимые элементы. Чтобы настроить внешний вид, просто используйте CSS, либо непосредственно встроенный (предпочтительно), либо через CSS. Таким образом, WP все еще может применять свои темы и стиль. Когда темы будут обновлены, вы не потеряете все свои настройки.