Iterate durch eine Tabelle nach einem td nach Klasse suchen und den Text für diese td ändern

Question

Ich habe eine Entity Framework generierte Tabelle mit Werten in einem TD, die ich ändern muss. Ich muss dies Zeile für Zeile tun, da ich eine Gruppe von Optionsfeldern einfügen muss, aber jede Zeile der Schaltflächen muss einen eindeutigen Namen haben.

Grundsätzlich muss ich den überprüften Wert für eine Gruppe von Schaltflächen basierend auf dem Wert des Textes in einem TD mit ID von "Rate" festlegen, und entfernen Sie den vorhandenen Text, nachdem ich den Wert von ihnen habe.

Meine Tabelle sieht wie folgt aus,

<table id="IndexTable"> 
<tr> 
    <th>CoffeeID </th> 
    <th>Degree </th> 
    <th>Weight </th> 
    <th>Profile </th> 
    <th>UsageInfo </th> 
    <th>Comments </th> 
    <th>AmbientTemp </th> 
    <th>Rating </th> 
    <th>WeightDeducted </th> 
    <th>Selected </th> 
    <th>ProfileID </th> 
    <th>ProfileStart </th> 
</tr> 
<tr> 
    <td>1 </td> 
    <td>1 </td> 
    <td>3 </td> 
    <td>9 </td> 
    <td>Filter Brew </td> 
    <td>Perfecto!! </td> 
    <td>55 </td> 
    <td id="Rating">4.25 </td> 
    <td>1 </td> 
    <td>4 </td> 
    <td>34 </td> 
    <td>1 </td> 

</tr> 
<tr> 
    <td>3 </td> 
    <td>15 </td> 
    <td>99 </td> 
    <td>87 </td> 
    <td>Espresso </td> 
    <td>WTF </td> 
    <td>99 </td> 
    <td id="Rating">4.5 </td> 
    <td>5 </td> 
    <td>3 </td> 
    <td>66 </td> 
    <td>4 </td> 

</tr> 

Und mein Skript ist wie folgt.

$("tr").each(function() { //get all rows in table 
var str = $("text[id=Rating]").val(); //assign text with matching id to str ---doesn't work 
$("td").each(function() { //get all tds in current row 
    var newStr = ("#Rating").text; //assign text in td with id Rating to newStr ---- doesn't work 
    alert(newStr); // fires undefined for each td in table? 
    //This is where I want to insert radio buttons and assign the one with the value of the Rating td to checked. 
}); 
}); 

Dies ist nur die jüngst, ich habe überall auf dieser Seite gesucht, aber alles, was ich gesehen habe, nicht umgehen, den Wert von einer bestimmten Spalte einer bestimmten Zeile mit bekommen, um den Wert zu ändern, und Wiederholen für jede Zeile/Spalte in der Tabelle. Ich komme von einem DB-Hintergrund, wo dies wirklich einfach ist und das ist sehr frustrierend.

Answer 1

Sie haben ein paar Dinge falsch mit Ihrem html, und Ihre jQuery, um zu beginnen, wie SKS gesagt hat, können Sie nicht mehrere Knoten in Ihrem HTML-Dokument haben, die die gleiche ID haben. ID muss eindeutig sein. Ich empfehle stattdessen eine Klasse.

Sie sollten auch haben Ihre Kopfzeile in einem <thead> und den Körper Ihrer Tabelle in einer <tbody>

jetzt auf Ihre jQuery, $("td") finden alle die TDs in dem Dokument, nicht nur die, die in der Reihe.

Sie möchten $(this).find('td') verwenden oder Sie könnten .children oder einen ausgefallenen Selektor auf höherer Ebene verwenden. Es gibt viele verschiedene, korrekte Wege, um diese Informationen zu erhalten.

Ich habe Ihren Code zu nehmen und modifiziert es etwa so:

$("tbody").find("tr").each(function() { //get all rows in table 

    var ratingTdText = $(this).find('td.Rating').text(); 
    //gets the text out of the rating td for this row 
    alert(ratingTdText); 

}); 

Das mit dem html funktioniert etwas geändert:

<table id="IndexTable"> 
<thead> 
    <tr> 
    <th>CoffeeID </th> 
    <th>Degree </th> 
    <th>Weight </th> 
    <th>Profile </th> 
    <th>UsageInfo </th> 
    <th>Comments </th> 
    <th>AmbientTemp </th> 
    <th>Rating </th> 
    <th>WeightDeducted </th> 
    <th>Selected </th> 
    <th>ProfileID </th> 
    <th>ProfileStart </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>1 </td> 
    <td>1 </td> 
    <td>3 </td> 
    <td>9 </td> 
    <td>Filter Brew </td> 
    <td>Perfecto!! </td> 
    <td>55 </td> 
    <td class="Rating">4.25 </td> 
    <td>1 </td> 
    <td>4 </td> 
    <td>34 </td> 
    <td>1 </td> 

</tr> 
<tr> 
    <td>3 </td> 
    <td>15 </td> 
    <td>99 </td> 
    <td>87 </td> 
    <td>Espresso </td> 
    <td>WTF </td> 
    <td>99 </td> 
    <td class="Rating">4.5 </td> 
    <td>5 </td> 
    <td>3 </td> 
    <td>66 </td> 
    <td>4 </td> 

</tr> 
</tbody> 
</table> 

Hoffnung, dies hilft Ihnen in die richtige Richtung zu bekommen!

oh, ich habe es fast vergessen! Hier ist ein Link zu einem jsfiddle, so dass Sie dies in Aktion sehen können: http://jsfiddle.net/fCpc6/

Answer 2

Ich glaube, du bist:

var newStr = ("#Rating").text(); 

Oder:

var newStr = ("td[id='Rating']").text(); 

Answer 3

Sie haben ein paar Fehler in der JavaScript.

• Verwenden thistd s zu erhalten, die die aktuellen tr gehört.
• "text[id=Rating]" ist ein ungültiger Selektor - es gibt kein Text-Tag.
• #Rating sollte wahrscheinlich eine Klasse sein, da IDs eindeutig sein müssen. .. (<td id="Rating"> zu <td class="rating"> ändern
• Sie wurden Klammern auf .text() fehlt

Hier ist eine aktualisierte Beispiel: