如何使用链接的行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");
});

小提琴的例子