jump to navigation

NOTE: The spam filter is being unusually aggressive. If you comment does not immediately appear, it has simply been placed in moderation and I will approve it as quickly as possible. Thank you for your patience.

"Murphy was an optimist!"

jquery challenge of the day September 7, 2010 6:19 pm

Posted by Doug McCaughan in : CSS, Daily Life, JavaScript, jQuery, Programming, Technology
, trackback

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">
         <th>col 1 label</th>
         <th>col 2 label</th>
         <td>sometext <a class="tt" href="#">link</a></td>
         <td>moretext <a class="tt" href="#">link</a></td>
         <td>differenttext <a class="tt" href="#">link</a></td>
         <td>othertext <a class="tt" href="#">link</a></td>

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.

Comments after advertisement


1. Paul Dragoonis - September 8, 2010

You need to add an ID like id=”myrow_1″, id=”myrow_2″ to each so you know which one you’re on and can grab the previous one.

$(“#tbl .tt”).click(function() {
var curr_tr_id = $(this).closest(‘tr’).attr(‘id’).replace(‘myrow_’, ”);
var above_tr = $(“#tbl tbody tr#myrow_” + (curr_tr_id – 1));
above_tr.find(“.tt”).css(‘font-weight’, ‘bold’);
return false;

2. Doug McCaughan - September 8, 2010

That’s about what I’d resolved myself to do. Since the table is being built dynamically, I was hoping to avoid tying things to ids. I like your solution.

3. Paul Dragoonis - September 8, 2010

You can alternatively use the .eq() method. Without these ID’s and you knew the current ‘s number then you can do
$(‘#tbl tbody tr’).eq(curr – 1);

4. Doug McCaughan - September 8, 2010

Excellent! Thank you for the help.

5. Doug McCaughan - September 8, 2010

That did it!

6. Doug McCaughan - September 8, 2010

Ah, a curveball. I can’t rely upon the ids. My link is actually removing the row from the table with .remove() so the ids become inconsistent. Might be row0, row1, row4, row5 in the case of row 3 being removed. Now when I click the link on row4 it will look for row 3. I think I have a solution.

7. Doug McCaughan - September 8, 2010

Done! Working. Turned out to be a pretty piece of code. Each row of the table represents a number with a link that says “split”. When “split” is clicked the word is hidden and a new row appears beneath it with a minus to delete it and a plus to add another split. When the plus is clicked the plus is hidden and a new row below it created with its own minus and plus. A click to a minus removes the row completely. If the click to the minus is on the same row as a visible plus, the plus above it is restored before the row is removed (or in the case of the primary row the word split is restored). It reads strangely but its quite elegant.

8. Shema - November 16, 2011

Here you go. I have tested this and it works:
$(document).ready(function () {
$(“a.tt”).click(function () {
Hope it helps.

9. nabarj - April 7, 2012

$(“table#tbl a”).click(
var linkindex= $(“table#tbl tr”).index($(this).parents(“tr”));

if(linkindex == 1){
$(“table#tbl a”).css(“font-weight”,”normal”);
$(“table#tbl tr:nth-child(” + (linkindex+1) + “) a”).css(“font-weight”,”bold”);

$(“table#tbl a”).css(“font-weight”,”normal”);
$(“table#tbl tr:nth-child(” + (linkindex-1) + “) a”).css(“font-weight”,”bold”);



10. Doug McCaughan - April 9, 2012

Thank you both!