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>

我想在点击时读取tTle的相应thead值但是？我怎么能这样做？

    $(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()获取，.eq()在相应td的{{1}}上执行，并获取tr内的td位置。

当我们有索引时，很容易使用jsFiddle找到我们正在寻找的.tTle。

修改：以及承诺的{{3}}。它似乎工作正常，虽然OP在下面的评论中表明这个答案必须改变。可能是一些加价问题。

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


                });

如何从类名读取值

3 个答案: