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"/>开发者_Python百科
            </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.

You can use elem.className or, if you prefer using a jQuery method, $(elem).attr('className'). In your event handler, this is the elem.

However, to store arbitrary data, the HTML5 data attributes (also work fine without actually setting a HTML5 doctype) are better:

<sometag data-something="text-or-json"> and $('...').data('something')

try the following Javascript code

$(function ()
                {

                    $(".but").click(function(){

                        alert("here");
                        var nTd = this.parentNode;
                        alert(nTd.getElementsByClassName("Val1")[0].value)
                        alert(nTd.getElementsByClassName("Val2")[0].value)
                    });


                });