如何用jQuery在WordPress表格.table-value前插入td的data-th属性文本

直接使用以下代码即可完成需求，代码会自动遍历所有表格内带.table-value类的单元格，读取data-th属性值生成带自定义类的标题插入到单元格内容前方：

jQuery(document).ready(function($) {
  // 遍历所有.table-value单元格
  $('.table-value').each(function() {
    // 获取当前单元格的data-th属性值
    const thText = $(this).data('th');
    // 过滤掉无data-th值的空单元格
    if (thText && thText.trim() !== '') {
      // 生成标题结构插入到单元格内容最前方
      $(this).prepend(`<h4 class="table-mobile-th">${thText}</h4><br>`);
    }
  });
});

自定义调整说明 #

• 代码里的table-mobile-th是给移动端表头加的自定义类名，你可以替换成需要的类名，也可以直接用示例里的someClassName/someClassName2，如果需要不同字段对应不同类，额外加字段判断逻辑即可
• 如果需要仅在移动端生效，可以配合CSS媒体查询，或者直接在代码里加屏幕宽度判断，示例如下：

jQuery(document).ready(function($) {
  // 仅在屏幕宽度小于768px时执行逻辑
  if ($(window).width() < 768) {
    $('.table-value').each(function() {
      const thText = $(this).data('th');
      if (thText && thText.trim() !== '') {
        $(this).prepend(`<h4 class="table-mobile-th">${thText}</h4><br>`);
      }
    });
  }
  // 如需窗口大小变化时重新触发逻辑，可自行补充resize事件监听
});

• 如果data-th属性值可能包含HTML特殊字符，建议使用更安全的DOM生成方式，替换prepend部分代码即可避免XSS风险：

const $thTitle = $('<h4 class="table-mobile-th"></h4>').text(thText);
$(this).prepend($thTitle, '<br>');

WordPress部署方式 #

可选择任意一种方式把代码部署到站点：

• 进入WordPress后台「外观」-「自定义」-「自定义JS」，把代码粘贴进去保存即可
• 如果你使用了代码管理类插件，直接新建JS片段，选择在页脚加载即可
• 也可以直接把代码包在<script>标签内，添加到当前主题的footer.php文件的</body>标签之前

内容的提问来源于stack exchange，提问作者Blomshit