[jQuery] Modifying table cell text

[jQuery] Modifying table cell text


I have a table that looks like this:
------
<div class="highest-rated">
<table>
<tr>
    <td class="title">Lorem ipsum</td>
<td class="category">Audio</td>
<td class="rating">3</td>
</tr>
<tr>
    <td class="title">Foo</td>
<td class="category">Video</td>
<td class="rating">2</td>
</tr>
<tr>
    <td class="title">Bar</td>
<td class="category">Video</td>
<td class="rating">2</td>
</tr>
<tr>
    <td class="title">Hello world</td>
<td class="category">Audio</td>
<td class="rating">1</td>
</tr>
</table>
</div>
------
With a little jquery magic I would like to modify the text of the
rating cell and have it display an image.
This should be the outcome:
------
<div class="highest-rated">
<table>
<tr>
    <td class="title">Lorem ipsum</td>
<td class="category">Audio</td>
<td class="rating"><img src="images/rating-3.gif" /></td>
</tr>
<tr>
    <td class="title">Foo</td>
<td class="category">Video</td>
<td class="rating"><img src="images/rating-2.gif" /></td>
</tr>
<tr>
    <td class="title">Bar</td>
<td class="category">Video</td>
<td class="rating"><img src="images/rating-2.gif" /></td>
</tr>
<tr>
    <td class="title">Hello world</td>
<td class="category">Audio</td>
<td class="rating"><img src="images/rating-1.gif" /></td>
</tr>
</table>
</div>
------
The number of table rows may vary on different pages.
How should I do this...?
Regards,
Per