jQuery选择具有特定标题的表格单元格

Question

我有一个带有“标题”的表格，用户使用常规 tr 标签（不是 th）。我需要找到标题“Col2”，然后在 Col2 下的每个单元格中添加一个锚点。我可以做$("td:contains('Col2')) 来查找标题，但数据行也可能有“Col2”。如何只搜索第一行然后循环遍历行单元格？

<table>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
  </tr>
  <tr>
    <td>Data1</td>
    <td>Data2</td>
  </tr>
  <tr>
    <td>Data3</td>
    <td>Data4</td>
  </tr>
</table>

变成：

<table>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
  </tr>
  <tr>
    <td>Data1</td>
    <td><a href="?Data2">Data2</a></td>
  </tr>
  <tr>
    <td>Data3</td>
    <td><a href="?Data4">Data4</a></td>
  </tr>
</table>

编辑：我实际上在同一页面中有多个表格。 :first 只匹配第一个表中的第一行。

更新：这是我最终得到它的方法。感谢大家的帮助！从你们每个人那里得到一点，从 API 文档中得到一点，它就可以工作。现在我开始掌握它的窍门，我无法想象没有 jQuery 做这件事的痛苦。

$('table').each(function(i, table) {
    $(table).find('tr:first > td:contains("Col2")').each(function() {
        var cellIndex = $(this).index() + 1;

        $(table).find('tr:not(:first) > td:nth-child(' + cellIndex + ')').wrapInner(function() {
            return $('<a />', { 'href': '?data=' + $(this).text() });
        });
    });
});

Answer 1

您可以像这样使用.index() 和.wrapInner(function) 来做到这一点：

var i = $("table tr td:contains('Col2')").index() + 1;
$("table tr:gt(0) td:nth-child(" + i +")")​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.wrapInner(function() {
    return $("<a />", { "href": "?" + $(this).text() });
});​

You can see an example here，这将获取包含"Col2"（基于0）的<td> 的索引，然后使用:nth-child() selector（基于1，因此我们添加1）来获取<td> 元素你想.wrapInner()。之后，我们只是返回通过$(html, props) 生成的结构来包装它们。

Answer 2

[See it in action]

var index = $("table:first-child td:contains('Col2')").index() + 1;
$("tr:not(:first) :nth-child("+index+")").each(function(){
   var old = $(this).html();
   $(this).html("<a href='?"+old+"'>"+old+"</a>");                                          
});

​

Answer 3

您是否尝试过使用“:first”选择器（包括“not(:first)”）

http://api.jquery.com/first-selector/

Answer 4

我会做以下事情：

搜索具有匹配条件的列的标题行，然后获取列索引。然后选择表中从在该列索引处找到的第二行开始的所有行。然后创建你的锚。如果您需要帮助，我可以尝试编写一些代码。