如何从类名中读取值

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>

当我单击 but 时，我想读取 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() 获取，该方法在相应 tr 中的 td 集合，并获取其中 td 的位置。

当我们有了索引后，很容易使用 找到我们正在寻找的 .tTle .eq()。

编辑：以及承诺的jsFiddle。它似乎工作得很好，尽管OP在这个答案下面的评论中指出它必须改变。可能是一些标记问题。

Answer 2

您可以使用 elem.className，或者，如果您更喜欢使用 jQuery 方法，则可以使用 $(elem).attr('className')。在您的事件处理程序中，this 是 elem。

但是，为了存储任意数据，HTML5 数据属性（无需实际设置 HTML5 文档类型也能正常工作）更好：

和 <代码>$('...').data('某事')

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


                });