时间戳

首页 > 解决方案 > 在项目前添加数据文本

html - 在项目前添加数据文本

问题描述

我遇到了一个 WordPress 插件的问题，它创建了一个表格，但在移动设备上遗漏了 TH 信息。我希望在表格数据之前显示“数据”文本/数据。

我想要实现的示例

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

标签： htmljqueryhtml-table

解决方案

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

要查看实际情况，请在 Full Page 中显示片段，然后更改窗口大小。一旦小于480像素，像手机一样，就会把每一个TH做成一个块显示，这样就各行其道了。

您也可以使用 jQuery 来做到这一点。它只需要一个事件来检查window或document宽度。无论如何，CSS都会这样做。

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

推荐阅读