1

我有下表：

<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值？我怎样才能做到这一点？tTlebut

$(function ()
    {
        
         $(".but").click(readTitle);      
            
  
        });
});
4

3 回答 3

3

如果我理解得很好，如果单击按钮，您想获取该按钮所在的列，并确定该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按钮父级的从 0 开始的位置。td这可以使用 来获取，它在相应的 's.index()集合上执行并获取我们在其中的位置。tdtrtd

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

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

于 2011-04-18T07:27:13.457 回答
1

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

但是，要存储任意数据，HTML5 数据属性（在没有实际设置 HTML5 文档类型的情况下也可以正常工作）更好：

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

于 2011-04-18T07:16:44.273 回答
-1

试试下面的Javascript代码 

$(function ()
                {

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

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


                });
于 2011-04-18T07:54:08.403 回答