JohnnyP JohnnyP - 6 months ago 14
Javascript Question

How to I get the index of a TD in relation to the TABLE, not the TR

I have four tables on a page and I want to target the index of table cells in each separately, with the TABLE as the parent, not the ROW. This code returns the index within each row.

So I want to find the first three TDs with a class of "events" in each table.

$('.section .calendar').each(function(){
$(this).find('td.events').each(function(){
ind= $(this).index()
ind <= 2 ? $(this).css('background','#f90') : $(this).css('background','#000');

})
})


If I try:
ind= $('.calendar td.events').index(this)

it targets a cells' index within all four tables as the parent

ind= $(this).index()

targets the cells' index within each row(of all four tables) as its parent

The tables' structures are the usual valid :

<table class="calendar">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody>
<tr>
<td></td>
<td class="events"></td>
<td></td>
<td class="events"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="events"></td>
<td></td>
<td></td>
<td></td>
<td class="events"></td>
<td></td>
</tr>


(...etc)




  • three more identical tables


Answer

You can try something like this. Its basically calculating the number of TDs before the current one.

function getTDIndex($td) {
    var index1 = $td.prevAll("td").length;
    var index2 = $td.closest("tr").prevAll("tr").find("td").length;

    var index = index1 + index2;
};