Here is my scenario:

I have a table that displays the Name, Age, and Details content on each row. When a user selects the Details button, it should trigger a modal and show additional content specific to that Person in the table.

Issue at hand:

I am using Razor syntax and dynamically generating the rows within the table.

Question: How can I get the row index value for that specific row when selecting the Details button

Additional Notes:

I did some research online, but couldn't find anything that helped me in my scenario.

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);
    });
}

Related posts

Recent Viewed