javascript - jquery中双击事件获取表的rowid

Question

我正在使用 mvc4 和 jquery。

我正在尝试找到一种方法来使整行触发双击事件。

我的场景是，包含参数 Person ID、FirstName 和 Lastname 的模型。

但是 html 表只显示名字和姓氏。

在哪里存储人员 ID，如果它隐藏，也不会出现 javascript 和空间问题。

我的需要是，使行可双击，然后获取 personID，其次是向最终用户隐藏 person ID。

为了获取我使用的 personid，

$('#EditTable td').dblclick(function () {
    $(this).find('td:eq(1)')
    $(this).find('td:first').text()
}

但没有得到任何值。

Answer 1

解决方案

问题是事件是针对 td 元素触发的，因此 this 引用了 td 元素。您需要获取父级 tr，然后调用 find 函数。

类似这样的事情:

$('#EditTable td').dblclick(function () {
    var $this = $(this);
    var row = $this.closest("tr");
    row.find('td:eq(1)');
    row.find('td:first').text();
}); //<-- NOTE: you dont close correctly in your example, which cause console errors

Here is a working example.

<小时/>

或者，您可以将事件分配给 tr 元素，这样您就可以保留原始函数代码...

$('#EditTable tr').dblclick(...

<小时/>

就我个人而言，我更喜欢使用 data 属性来存储“元数据”类型的内容。例如:

$('#EditTable td').dblclick(function () {
    var $this = $(this);
    var row = $this.closest("tr");
    var id = row.data("id");
});

带有以下 html 表格:

<table id="EditTable">
    <tr data-id="1">
        <td>1</td><td>One</td>
    </tr>
</table>

Here is a working example using data attributes.