Question

I have HTML:

<table id='ansichttable' class='table appels'>
    <thead>
        <tr>
            <th class='bold'>Afbeelding</th>
            <th class="bold">Locatie</th>
            <th class='bold'>Groep</th>
            <th class='bold'>Soort</th>
            <th class='bold'>Bijzonderheden</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a class="img" href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Dubbele Bellefleur</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
        <tr>
            <td><a class="img" href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Dubbele Zoete Aagt</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
        <tr>
            <td><a href="images/imagesfruit/boomgaard4.jpg"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
            <td valign="top">Tuin</td>
            <td valign="top">Appels</td>
            <td valign="top" class="titel">Ellisons Orange</td>
            <td valign="top">Zoete stevige appel</td>
        </tr>
    </tbody>
</table>

What I am trying to create is that jQuery gets the title from the: td class="titel"
and create at the a href="......" a title tag like this:

<td><a href="images/imagesfruit/boomgaard4.jpg" titel="Ellisons Orange"><img src="images/imagesfruit/thumbs/t-boomgaard4.jpg"/></a></td>
<td valign="top">Tuin</td>
<td valign="top">Appels</td>
<td valign="top" class="titel">Ellisons Orange</td>
<td valign="top">Zoete stevige appel</td>

I have tried the following :

$(document).ready(function(){
 var gettitle = $("td:eq(3)").html();
                 $("td a").attr("title", $('td.titel').text()); 

And:

$("td a.img").attr("title", $('.titel').html());

And:

$('table').each(function() {
  var title = $(this).find('td.titel').text();
  $(this).find('td a').attr('title', title);
 });

All of them are working, but collecting all the titles from the table and attach them to all the images.

What I need is that jQuery collects the title and attach it to the image above the td where it gets the title. What am I doing wrong?

Answer 1

See it on jsfiddle. This will put the text from each td with class titel on the title attribute of the a on the same row.

$('td.titel').each(function() {
    $(this).parent().find('a').attr('title', $(this).text()); 
});

Explanation of what this does:

• For each of the selected td.titel elements
  • Walk up the tree to the parent (in this case it’s the tr), then down to the a inside that tr
  • Put the text of the td.titel element in the title attribute of the a