Question

以下是我的情景：

我有一个表格，显示每行的名称，年龄和详细信息内容。当用户选择Details按钮时，它应触发模态并在表格中显示特定于该Person的其他内容。

手头的问题：

我正在使用Razor syntax并动态生成表格中的行。

问题：选择Details按钮时，如何获取该特定行的行索引值

附加说明：

我在网上做了一些研究，但在我的场景中找不到任何帮助我的东西。

HTML

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Details</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var viewModel in Model)
        {
            <tr>
                <td>@viewModel.Name</td>
                <td>@viewModel.Age</td>
                <td><button onclick="PersonViewModel(this)" type="button" class="btn btn-success" data-toggle="modal" data-target="#details-modal"><span class="fa fa-external-link-square"></span> Details</button></td>
            </tr>
        }
        </tbody>
    </table>
</div>

JavaScript的：

function PersonViewModel(x) {
    $('body').on('click', 'a.showMore', function(event) {
        var rowIndex = $(this).closest('tr').index();
        alert("Row index is: " + rowIndex);
    });
}

Answer 1

您是PersonViewModel点击处理程序中的绑定事件。要获取父tr的索引，您需要使用x对象。

使用

function PersonViewModel(x) {
    var rowIndex = $(x).closest('tr').index();
    alert("Row index is: " + rowIndex);
}

Answer 2

你可以这样试试。我想这会对你有帮助。

$(this).parents('tr')).index()

这将为您提供父tr和index（）函数将给出该tr的索引。

Answer 3

请检查我的代码，而不是

function PersonViewModel(x) {
     var index = $(".table tr").index( $(x).parents('tr'));
     alert(index);
}

查找动态生成表的表行索引

3 个答案: