jQuery wählen Sie Tabellenzellen mit bestimmten Kopfzeile

Question

Ich habe eine Tabelle mit einer "Kopfzeile", die Benutzer regelmäßige tr-Tags (nicht th). Ich brauche, um Kopfzeile "Col2" zu finden und dann zu jeder Zelle unter Col2 einen Anker hinzufügen. Ich kann tun $("td:contains('Col2')) um die Kopfzeile zu finden, aber die Datenzeilen könnten auch "Col2" enthalten. Wie würde ich nur die erste Zeile suchen und dann eine Schleife durch die Zeilenzellen ziehen?

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

Wird:

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

Editar: Ich habe sogar mehr als eine Tabelle auf derselben Seite. :first passt nur auf die erste Zeile der ersten Tabelle.

更新しました。 Hier ist, wie ich es schließlich zum Laufen gebracht habe. Vielen Dank an alle für Ihre Hilfe! Mit ein wenig von jedem von Ihnen und ein wenig von der API-Dokumente es funktioniert. Jetzt, wo ich anfange, den Dreh raus zu haben, kann ich mir den Schmerz nicht vorstellen, dies ohne jQuery zu tun.

$('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

Sie können dies tun mit .index() y .wrapInner(function) wie diese:

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

Ein Beispiel sehen Sie hier wird der Index des <td> die Folgendes enthält "Col2" (0-basiert) verwendet dann die :nth-child() Selektor (1-basiert, wir addieren also 1), um die <td> Elemente, die Sie .wrapInner() . Danach geben wir nur noch die Struktur zurück, in die wir sie einpacken, die mit $(html, props) .

Answer 2

[ Sehen Sie es in Aktion ]

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

Haben Sie versucht, den Selektor ":first" zu verwenden (einschließlich "not(:first)")

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

Answer 4

Ich würde wie folgt vorgehen:

Kopfzeile nach Spalte mit übereinstimmenden Kriterien suchen und dann Spaltenindex erhalten. Wählen Sie dann alle Zeilen in der Tabelle ab der zweiten Zeile aus, die bei diesem Spaltenindex gefunden werden. Erstellen Sie dann Ihre Anker. Ich kann versuchen, etwas Code zu schreiben, wenn Sie dabei Hilfe benötigen.