如何通过描述（无类或ID）在表格中查找单元格并操作下一个单元格的内容答案

【问题标题】：How to find cell in table by description (no class or id) and manipulate the content of the next cell如何通过描述（无类或ID）在表格中查找单元格并操作下一个单元格的内容
【发布时间】：2015-11-15 16:37:28
【问题描述】：

由于 jQuery 不是我最好的技能组合，我需要一些帮助，因为我似乎无法找到可以用作我的问题参考的帖子。

在表格中（带有class="shop_attributes"），我想直接在<th>Reference ID</th> 单元格之后操作嵌入在下一个单元格（<td>...</td>）的段落部分中的字符串...

如何获取该字符串（29909、40887、51890、63388）以便我可以使用文本替换功能对其进行操作（我想将它们转换为 URL）？

其次，因为我可以使用<th>Reference ID</th> 在同一个表中拥有多个行/单元格。我如何能够处理所有可能带有参考 ID 的行（所以“29909、40887、51890、63388”和“255”）？

下面是一个非常简化的表格设置。实际上，表格中会出现更多的行（属性）。

<table class="shop_attributes">             
  <tbody>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>29909, 40887, 51890, 63388</p>
      </td>     
    </tr>
    <tr>            
      <th>Attribute X</th>
      <td>
        <p>X</p>
      </td>     
    </tr>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>255</p>
      </td>     
    </tr>

【问题讨论】：

标签： jquery html-table cell

【解决方案1】：

这样的事情怎么样？该演示使用:contains() 伪选择器和.html( fn ) 来实现选择和操作。

$('.shop_attributes th:contains("Reference ID")')
.next('td').find('p').html(function(i,html) {
     return html.replace(/(\d+)/g, '<a href="#$1">$1</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="shop_attributes">             
  <tbody>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>29909, 40887, 51890, 63388</p>
      </td>     
    </tr>
    <tr>            
      <th>Attribute X</th>
      <td>
        <p>X</p>
      </td>     
    </tr>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>255</p>
      </td>     
    </tr>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>129909, 140887, 151890, 163388</p>
      </td>     
    </tr>
    <tr>            
      <th>Attribute X</th>
      <td>
        <p>X</p>
      </td>     
    </tr>
    <tr>            
      <th>Reference ID</th>
      <td>
        <p>255</p>
      </td>     
    </tr>
</tbody>
</table>

【讨论】：

哇——谢谢一百万！一个完整的工作解决方案，只需 4 行！我在想这需要更多的行。
很高兴我能帮上忙。不要忘记投票并接受答案。

【解决方案2】：

如果您可以为包含您要引用的数字的<td> 或<p> 分配一个类会更好，但如果由于某种原因这已经一成不变，您可以使用:contains() 选择器找到参考 ID <th> 元素，然后遍历从下一个单元格的 <p> 元素中抓取字符串的那些：

var refCells = $('th:contains("Reference ID")');
refCells.each(function(){
    var string = $(this).next('td').find('p').text();
    console.log(string);
});

这是一个小提琴：http://jsfiddle.net/k6cuxesu/

【讨论】：

是的，我知道 - 但是代码是由 WooCommerce 生成的，所以要完成这项工作，我必须侵入 WooCommerce 的核心，我不想这样做；）谢谢你的例子 - 从来不知道jQuery 中有一个 :contains 方法！