jQuery:确定从哪个函数调用

时间:2015-04-01 07:21:39

标签: javascript jquery knockout.js

我有一个看起来像这样的淘汰网格(没什么特别的):

knockoutjs grid editable

单击“编辑”时,必须确定调用的<tr>。例如,我在第一个用户上单击编辑,它必须登录控制台“1”,依此类推。

我的表格代码:

<table class="table table-striped table-bordered table-condensed" data-bind='visible: users().length > 0'>
    <thead>
        <tr>
            <th>UserId</th>
            <th>Username</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Email</th>
            <th>Date</th>
            <th />
        </tr>
    </thead>
    <tbody data-bind='foreach: users'>
        <tr>
            <td>
                <label data-bind="text: UserId" />
            </td>
            <td>
                <input data-bind='value: Username' />
                <label data-bind="text: Username" />
            </td>
            <td>
                <input data-bind='value: FirstName' />
                <label data-bind="text: FirstName" />
            </td>
            <td>
                <input data-bind='value: LastName' />
                <label data-bind="text: LastName" />
            </td>
            <td>
                <input data-bind='value: Email' />
                <label data-bind="text: Email" />
            </td>
            <td>
                <input data-bind='value: Date' />
                <label data-bind="text: Date" />
            </td>
            <td class="tools">
                <a class="Apply" href="#" data-bind="click: $root.applyUser">Apply</a>
                <a class="Edit" href="#" data-bind="click: $root.editUser">Edit</a>
                <a class="Update" href="#" data-bind='click: $root.updateUser'>Update</a>
                <a class="Delete" href='#' data-bind='click: $root.removeUser'>Delete</a>
            </td>
        </tr>
    </tbody>
</table>

这是我的尝试:

$('a.Edit').click(function () {
                    var rowIndex = $(this).parent()
                                          .parent()
                                          .children()
                                          .index($(this).parent());
                    console.log('Row: ' + rowIndex);
                });

我错过了什么?

2 个答案:

答案 0 :(得分:2)

您可以使用.closest()来遍历最近的tr父级。

IF tr元素不是彼此的兄弟:将该对象传递给tr集合上的方法.index()

 $('tr').index($(this).closest('tr'));

IF tr元素是彼此的兄弟姐妹:

 $(this).closest("tr").index()

答案 1 :(得分:1)

我会这样做如下 -

通过将课程提供给父级tr -

<tr class="parent">

然后 -

$(this).closest('tr.parent').index()

因为如果案例是嵌套的tr(s),那么parent()将不会工作更长时间。