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() });
});​

Вы можете увидеть пример здесь , он получает индекс <td>, который содержит "Col2" (на основе 0), затем использует селектор :nth-child() (на основе 1, поэтому мы добавляем 1), чтобы получить <td>элементы, которые вы хотите .wrapInner().После этого мы просто возвращаем структуру, чтобы обернуть их, сгенерированную с помощью $(html, props).

Answer 2

вы пытались использовать селектор ": first" (включая "not (: first)")

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

Answer 3

[ увидеть его в действии ]

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 4

Я бы сделал следующее:

поиск строки заголовка для столбца с соответствующими критериями, а затем получить индекс столбца.Затем выберите все строки в таблице, начиная со второй, которые находятся по индексу этого столбца.Затем создайте свои якоря.Я могу попытаться написать некоторый код, если вам нужна помощь с этим.