在项目前添加数据文本。

Question

我在使用 WordPress 插件时遇到问题，它创建了一个 table，但在移动设备上遗漏了 TH 信息。我希望“data-th”text/data 在 table 数据之前显示。

我想要实现的目标示例

<*h4 class="someClassName">Article Name</h4*><br>BBD4<br><*h4 class="someClassName2">NFF</h4*><br>000-0000
等

我想用jQuery抓取data-th并插入(".table-value").before.

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

Answer 1

考虑以下 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>

要查看实际效果，请在全页中显示代码段，然后更改 window 大小。一旦它小于 480 像素，比如手机 Phone，它将使每个 TH 成为一个块显示，因此它们各自在自己的行上。

您也可以使用 jQuery 执行此操作。它只需要一个事件来检查 window 或 document 宽度。 CSS不管怎样都会去做。

使用 WordPress，通常最好制作标准 HTML 元素。因此，如果您使用 jQuery 构建 Table，请确保创建所有正确的元素。要调整外观，只需使用 CSS，直接内联（首选）或通过 CSS。这样 WP 仍然可以应用它的主题和样式。更新主题后，您不会丢失所有自定义项。

在项目前添加数据文本。

Add data-th text .before an item

html

jquery

html-table