Iterate attraverso una tabella trovando un td per classe e cambiando il testo per quel td

Question

Ho una tabella di Entity Framework generata con valori in un td che ho bisogno di cambiare. Ho bisogno di fare questo su una riga per riga perché ho bisogno di inserire un gruppo di pulsanti di opzione, ma ogni riga di pulsanti ha bisogno di un nome univoco.

Fondamentalmente, ho bisogno di impostare il valore controllato per un gruppo di pulsanti in base al valore del testo in un td con id di "Rate", e rimuovere il testo esistente dopo averne preso il valore.

mia tavola si presenta così,

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

E il mio script è il seguente.

$("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. 
}); 
}); 

Questa è solo l'ultima, ho guardato tutto questo sito, ma tutto quello che ho visto non tratta con ottenere il valore da una colonna specifica di una riga specifica, la modifica del valore, e ripetendo per ogni riga/colonna nella tabella. Vengo da uno sfondo db, dove questo è molto semplice e questo è molto frustrante.

Answer 1

Hai un paio di cose sbagliate con il vostro html, e il vostro jQuery, per iniziare, come ha affermato SKS, non è possibile avere più nodi nel documento html che hanno lo stesso ID. L'ID deve essere univoco.Però invece di utilizzare una classe.

Si dovrebbe anche avere la riga di intestazione in un <thead> e il corpo del vostro tavolo in un <tbody>

ora, sul vostro jQuery, $("td") troveranno tutti i TD nel documento, non solo quelli nella tua linea.

si vorrebbe usare $(this).find('td') o si potrebbe usare. Bambini o un selettore di livello superiore di fantasia. Ci sono MOLTI modi diversi e corretti per ottenere queste informazioni.

ho di prendere il codice e modificato in questo modo:

$("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); 

}); 

Questo funziona con il codice HTML leggermente modificata:

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

Spero che questo aiuti farti andare nella giusta direzione!

oh, ho quasi dimenticato! ecco un link a un jsfiddle in modo che tu possa vedere questo in azione: http://jsfiddle.net/fCpc6/

Answer 2

penso che stai cercando:

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

Oppure:

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

Answer 3

avete un paio di errori nel javascript.

• Usa this per ottenere td s che appartengono alla corrente tr.
• "text[id=Rating]" è un selettore non valido: non è presente alcun tag di testo.
• #Rating dovrebbe probabilmente essere una classe, poiché gli ID devono essere univoci. .. (Cambiare <td id="Rating"> a <td class="rating">
• ti mancava parentesi sulla .text()

Ecco un campione di aggiornamento: