Iterate through a table finding a td by class and changing the text for that td

Question

I have an Entity Framework generated table with values in a td that I need to change. I need to do this on a row by row basis because I need to insert a group of radio buttons but each row of buttons needs a unique name.

Basically, I need to set the checked value for a group of buttons based on the value of the text in a td with id of "Rate", and remove the existing text after I have got the value from it.

My Table looks like this,

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

And my script is as follows.

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

This is just the latest, I have looked all over this site, but everything I've seen doesn't deal with getting the value from a specific column of a specific row, changing the value, and repeating for each row/column in the table. I come from a db background, where this is really simple and this is very frustrating.

Answer 1

You've got a few things wrong with your html, and your jQuery, to start off, like SKS has stated, you cannot have multiple nodes in your html document that have the same ID. ID must be unique. I recommend using a class instead.

You should also have your header row in a <thead> and the body of your table in a <tbody>

now, onto your jQuery, $("td") will find all the td's in the document, not just the ones in your row.

you would want to use $(this).find('td') or you could use .children or a fancy higher level selector. There are MANY different, correct ways to get this information.

I have taking your code and modified it like 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);

});

This works with the html slightly modified:

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

Hope this helps get you going in the right direction!

oh, i almost forgot! here is a link to a jsfiddle so you can see this in action: http://jsfiddle.net/fCpc6/

Answer 2

I think you're looking for:

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

Or:

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