javascript - 如何使用行的 id 和链接的 rel 属性将 onclick 事件指向特定的表行内容 - jQuery

Question

我动态生成了这个表

<table>
    <tbody>
        <tr>
            <th>Email</th>
            <th>Name</th>
            <th>Date</th>
            <th>Action</th>
        </tr>
        <tr id="address-row-2">
            <td><input type="text" value="com@com.com" id="email-1" class="email"></td>
            <td><input type="text" value="John Doe 1" id="name-1" class="name"></td>
            <td>1 September 2013</td>
            <td><a href="#" class="orange" rel="edit-2">submit</a></td>
        </tr>
        <tr id="address-row-3">
            <td><input type="text" value="com@com.com" id="email-2" class="email"></td>
            <td><input type="text" value="John Doe 2" id="name-2" class="name"></td>
            <td>2 September 2013</td>
            <td><a href="#" class="orange" rel="edit-3>submit</a></td>
        </tr>
        <tr id="address-row-4">
            <td><input type="text" value="com@com.com" id="email-3" class="email"></td>
            <td><input type="text" value="John Doe 3" id="name-3" class="name"></td>
            <td>3 September 2013</td>
            <td><a href="#" class="orange" rel="edit-4>submit</a></td>
        </tr>
    </tbody>
</table>

提交按钮用于使输入可编辑，以便更改内联内容

$("input.email:text, input.name:text").attr("disabled",true);
$(".orange").attr('href', 'javascript:void(0)').click(function (){
    $("input.email:text, input.name:text").addClass("show-border");
    $("input.email:text, input.name:text").removeAttr("disabled");
});

如何将按钮的 onclick 事件指向其行 id 的输入。 更具体地说，如果我单击第三行的提交按钮，我希望能够仅编辑第三行的输入

Answer 1

您需要遍历 DOM 来查找与单击的按钮相关的元素。试试这个:

$(".orange").attr('href', 'javascript:void(0)').click(function (){
    var $row = $(this).closest('tr');
    $("input.email, input.name", $row).addClass("show-border");
    $("input.email, input.name", $row).removeAttr("disabled");
});

Example fiddle