Finden Tabellenzeile Index für Dynamisch generierte Tabelle

Question

Hier ist mein Szenario:

ich eine Tabelle, die den Namen, Alter zeigt, und dem Inhalt in jeder Zeile. Wenn ein Benutzer die Schaltfläche Details auswählt, sollte er ein Modal auslösen und zusätzlichen Inhalt anzeigen, der für diese Person in der Tabelle spezifisch ist.

Frage auf der Hand:

ich Razor syntax verwende und dynamisch die Zeilen in der Tabelle zu erzeugen.

Frage: Wie kann ich die Zeilenindexwert für die jeweilige Zeile erhalten, wenn die Details Taste

Auswahl

Zusätzliche Hinweise:

ich einige Online-Forschung getan hat, aber couldn Finde nichts, was mir in meinem Szenario geholfen hat.

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

Sie sind verbindlich Ereignis im PersonViewModel Click-Handler. Um den Index des übergeordneten Elements tr zu erhalten, müssen Sie das Objekt x verwenden.

Verwenden

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

Answer 2

Sie können wie folgt versuchen. Ich denke, das wird dir helfen.

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

Dies gibt Ihnen Eltern tr und index() Funktion Index dieses tr geben.

Answer 3

Bitte überprüfen Sie meinen Code statt Ihrer

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