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

How to point onclick event on a specific table row content using the id of the row and rel attribute of link - jQuery

本文关键字：jQuery onclick id 链接 何使用 rel 属性 事件      更新时间：2023-09-26

我动态生成了这个表

<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 的输入。更具体地说，如果我单击第三行的提交按钮，我希望只能编辑第三行的输入

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

示例小提琴

只需使用 closest 在 DOM 中搜索：

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

生活演示：http://jsfiddle.net/6uMjR/

你可以做：

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