Iterar a través de una tabla para encontrar un td por clase y cambiar el texto para ese td

Question

Tengo una tabla generada por Entity Framework con valores en un td que debo cambiar. Necesito hacer esto fila por fila porque necesito insertar un grupo de botones de opción, pero cada fila de botones necesita un nombre único.

Básicamente, necesito establecer el valor comprobado para un grupo de botones según el valor del texto en un td con id de "Velocidad", y eliminar el texto existente después de obtener el valor del mismo.

Mi tabla tiene este aspecto,

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

Y mi guión es el siguiente.

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

Este es sólo el último, me he mirado en todo este sitio, pero todo lo que he visto no trata de obtener el valor de una columna específica de una fila específica, cambiando el valor, y la repetición para cada fila/columna en la tabla. Vengo de un fondo de db, donde esto es realmente simple y esto es muy frustrante.

Answer 1

Usted tiene un par de cosas mal con su html, y su jQuery, para empezar, como ha declarado SKS, no puede tener múltiples nodos en su documento html que tengan la misma ID. La identificación debe ser única. Recomiendo usar una clase en su lugar.

También debe tener su fila de encabezado en un <thead> y el cuerpo de la tabla en un <tbody>

ahora, en su jQuery, $("td") encontrará toda la TD de en el documento, no sólo los de su fila.

es posible que desee utilizar $(this).find('td') o podría utilizar .children o un seleccionador de alto nivel de lujo. Hay MUCHAS formas diferentes y correctas de obtener esta información.

que han de tomar su código y modificado de esta manera:

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

}); 

Esto funciona con el html ligeramente modificado:

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

Esperanza esto ayuda a conseguir que va en la dirección correcta!

¡oh, casi lo olvido! aquí hay un enlace a jsfiddle para que pueda ver esto en acción: http://jsfiddle.net/fCpc6/

Answer 2

creo que está buscando:

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

O:

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

Answer 3

usted tiene unos pocos errores en su Javascript.

• Uso this llegar td s que pertenecen a la corriente tr.
• "text[id=Rating]" es un selector no válido - no hay etiqueta de texto.
• #Rating probablemente sea una clase, ya que los ID deben ser únicos. .. (Cambiar <td id="Rating"> a <td class="rating">
• Usted se echa en falta paréntesis en .text()

He aquí una muestra de actualización: