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.
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;
});
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.
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);
Excellent! Thank you for the help.
That did it!
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.
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.
Here you go. I have tested this and it works:
$(document).ready(function () {
$(“a.tt”).click(function () {
$(this).closest(‘tr’).prev().children().next().children(‘a.tt’).addClass(‘bold’);
});
});
Hope it helps.
$(function(){
$(“table#tbl a”).click(
function(){
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”);
}else{
$(“table#tbl a”).css(“font-weight”,”normal”);
$(“table#tbl tr:nth-child(” + (linkindex-1) + “) a”).css(“font-weight”,”bold”);
}
}
)
})
Thank you both!