I have the following table:
<table>
<thead>
<tr>
<th class="tTle">Mon</td>
<th class="tTle">Tues</td>
<th class="tTle">Wed</td>
<tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="monday"/>
</td>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="tuesday"/>
</td>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="wednesday"/>
</td>
</tr>
<tr>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="monday"/>
</td>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="tuesday"/>
</td>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="wednesday"/>
</td>
</tr>
<tr>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="monday"/>
</td>>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="tuesday"/>
</td>
<td>
<input type="text" class = "Val1"/>
<input type="text" class = "Val2"/>
<input type="button" class = "but" val="wednesday"/>
</td>
</tr>
</tbody>
</table>
I want to read the respective thead
value for tTle
when I click on but
? How can I do that?
$(function ()
{
$(".but").click(readTitle);
});
});
If I understood well, if a button is clicked, you want to get which column is this button in, and the determine the thead
title for that column. My little snippet does that:
$('.but').click(function () {
var $me=$(this);
var place=$('td', $me.closest('tr')).index($me.closest('td'));
var text=$('thead .tTle').eq(place).text();
});
In place
, the 0-based position of the button's parent td
will be stored. This can be fetched using .index()
, which is executed on the set of td
's in the corresponding tr
and gets the position of our td
inside that.
When we have the index, it is easy to find the .tTle
we are looking for using .eq()
.
Edit: And the promised jsFiddle. It seems to work fine, though OP indicated in the comments below this answer that it has to be changed. Might be some markup problems.