Posted on 10 Comments

jquery challenge of the day

And now for something completely different…

Let’s say you have a table that could have infinite rows. The table has an id but none of the other elements (ie. we won’t be traversing by id). The column to the furthest right of the row has an anchor tag in the for of an <a href> There are no other anchors on that row. What I want to do is when the anchor tag is clicked, have the <a href> text in the row above the clicked on turn bold and only that <a href>. Sample table:

<table id="tbl">
   <thead>
      <tr>
         <th>col 1 label</th>
         <th>col 2 label</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>one</td>
         <td>sometext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>two</td>
         <td>moretext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>three</td>
         <td>differenttext <a class="tt" href="#">link</a></td>
      </tr>
      <tr>
         <td>four</td>
         <td>othertext <a class="tt" href="#">link</a></td>
      </tr>
   </tbody>
</table>

So, if I click the link in row three, I want the text "link" in row two to become bold. This is using jquery and traversing this is kicking me hard.