$(".highest-rated td.rating").each(function() {
var rating = $(this).text();
$(this).html('<img src="images/rating-' + rating + '.gif" />');
});
- Richard
On Wed, Jul 2, 2008 at 11:02 AM, P <[EMAIL PROTECTED]> wrote:
>
> 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
>
