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

仅closest用于在 DOM 中搜索：

$('input').click(function(){
    var rowId = $(this).closest('tr').attr('id');
});

现场演示：http: //jsfiddle.net/6uMjR/

Answer 2

你可以做：

$(".orange").click(function() {
    $(this).siblings("input:text").prop("disabled", false);
});

Answer 3

您需要遍历 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");
});

示例小提琴