title: Find Table Row Index for Dynamically Generated Table
body: <p><strong>Here is my scenario:</strong></p>
  
  <p>I have a table that displays the Name, Age, and Details content on each row. When a user selects the <code>Details</code> button, it should trigger a modal and show additional content specific to that Person in the table.</p>
  
  <p><strong>Issue at hand:</strong></p>
  
  <p>I am using <code>Razor syntax</code> and dynamically generating the rows within the table.</p>
  
  <blockquote>
    <p><strong>Question:</strong> How can I get the row index value for that specific row when selecting the <code>Details</code> button</p>
  </blockquote>
  
  <p><strong>Additional Notes:</strong> </p>
  
  <p>I did some research online, but couldn't find anything that helped me in my scenario.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;table class="table table-striped"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Details&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          @foreach (var viewModel in Model)
          {
              &lt;tr&gt;
                  &lt;td&gt;@viewModel.Name&lt;/td&gt;
                  &lt;td&gt;@viewModel.Age&lt;/td&gt;
                  &lt;td&gt;&lt;button onclick="PersonViewModel(this)" type="button" class="btn btn-success" data-toggle="modal" data-target="#details-modal"&gt;&lt;span class="fa fa-external-link-square"&gt;&lt;/span&gt; Details&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          }
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function PersonViewModel(x) {
      $('body').on('click', 'a.showMore', function(event) {
          var rowIndex = $(this).closest('tr').index();
          alert("Row index is: " + rowIndex);
      });
  }
  </code></pre>