jquery - 使用 jquery 处理表中的项目

Question

我有一个表格，其中的项目排成一行，每个项目都有一个按钮。

我想单击该按钮并从我的项目中获取值。就像“您点击了button1并且您的项目名称是item1”

哦，当然，我在中继器中执行此操作，并且我将主键作为 tr id。

我有一个jsfiddle我解释更多的例子，现在唯一有效的是，当我单击按钮时，它会显示按钮名称。

提前致谢!

HTML

<table id="presTable">
        <tr>
            <th></th>
            <th>
                Name
            </th>
            <th>
                Adress
            </th>
        </tr>

        <tr id="Name0" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button0"
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name0</span>
            </td>
            <td>
               <span id="spanAdress">  Adress0</span>
            </td>
        </tr>

        <tr id="Name1" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button1" 
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name1</span>
            </td>
            <td>
               <span id="spanAdress">  Adress1</span>
            </td>
        </tr>

        <tr id="Name2" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button2"
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name2</span>
            </td>
            <td>
               <span id="spanAdress">  Adress2</span>
            </td>
        </tr>
</table>

Jquery

$(function () {        
    $('tr.itemRow > td > input.ss').each(function (row) {
        $(this).click(function (button) {
            alert("You have pushed the button " + $(this).attr("id"));
        });
    });
});

Answer 1

您只需要closest selector

$(function() {
    $('tr.itemRow > td > input.ss').click(function() {
        $this = $(this);
        alert("You have pushed at the button " + $this.attr("id") +  
        " name of you item is " + 
        $this.closest('tr').find('span.nameSpan').text());
    });
});​

为了绑定(bind)到点击，您不需要遍历行。您可以通过选择器 tr.itemRow > td > input.ss

来做到这一点

您应该更改标记，以便 span 具有类 nameSpan，因为不允许重复元素的 id

<span class="nameSpan" />