jqueryjquery-eventsdom-traversal

How to read values from class name


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);      
            
  
        });
});

Solution

  • 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.