Как читать значения из имени класса

Question

У меня есть следующая таблица

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

Я хочу прочитать соответствующее значение thead для tTle при нажатии, но? Как я могу это сделать?

    $(function ()
    {

         $(".but").click(readTitle);      


        });
});

Answer 1

Если я правильно понял, если нажата кнопка, вы хотите узнать, в каком столбце находится эта кнопка, и определить заголовок thead для этого столбца.Мой маленький фрагмент кода делает это:

$('.but').click(function () {
  var $me=$(this);
  var place=$('td', $me.closest('tr')).index($me.closest('td'));

  var text=$('thead .tTle').eq(place).text();
});

В place будет сохраняться позиция родителя кнопки td на основе 0.Это можно получить с помощью .index(), который выполняется на множестве td в соответствующем tr и получает позицию нашего td внутри этого.

Когда у нас есть индекс, легко найти .tTle, который мы ищем, используя .eq().

Редактировать : И обещанное jsFiddle .Кажется, что он работает нормально, хотя в комментариях под этим ответом ОП указал, что его нужно изменить.Могут быть проблемы с разметкой.

Answer 2

Вы можете использовать elem.className или, если вы предпочитаете использовать метод jQuery, $(elem).attr('className').В вашем обработчике событий this - это elem.

. Однако для хранения произвольных данных лучше использовать атрибуты данных HTML5 (также хорошо работающие без фактической установки типа документа HTML5):

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

Answer 3

попробуйте следующий Javascript код

$(function ()
                {

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

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


                });