我如何找到表中的行索引

Question

我有一个html表，它包含每行上的一个按钮。当我点击那个按钮时，我想获得该行的索引。用我的代码我得到的索引值，但它从1开始，而不是0.在其他例子中，我看到行索引是从值“0”开始，但在我的情况下，它从“1”开始。任何人都可以帮助我，我犯了错误。

这是我的桌子。

<div class="table-style table-municipality table-edit-community-view"> 
    <table id="sum_table"> 
     <tr class="titlerow"> 
      <th>S.N.</th> 
      <th>Community</th> 
      <th>Address</th> 
      <th>Area</th> 
      <th>Estimated</th> 
      <th>Total</th> 
      <th>Action</th> 
     </tr> 
     <? 
     $sn = 1; 
     while($result= mysql_fetch_row($res)) 
     { 
      ?> 
      <tr id="<?php echo $result[0];?>"> 
       <td align="center"><? echo $sn++; ?></td> 
       <td align="center"><? echo $result[1] ?></td> 
       <td align="center"><? echo $result[2] ?></td> 
       <td align="center" class="rowDataSd"><? echo $result[3] ?></td> 
       <td align="center" class="rowDataSd"><? echo $result[4] ?></td> 
       <td align="center" class="rowDataSd"><? echo $result[5] ?></td> 
       <td> 
        <button class="test">Test</button> 
       </td>      
      </tr> 
      <? 
     } 
     ?> 
    </table> 
</div> 

脚本：

$(".test").click(function(){ 
    console.log("name: ", $(this).closest('td').parent()[0].sectionRowIndex); 
}); 

Answer 1

你得到由1开始，因为你必须在表头开始一个tr元素的索引。您可以从返回的索引-1获得指数从0开始

$(".test").click(function(){ 
    console.log("name: ", $(this).closest('tr').index()-1); 
}); 

或者找到需要的行头除外行的集合当前行的索引：

$(".test").click(function(){ 
    console.log("name: ", $('#sum_table tr:not(.titlerow)').index($(this).closest('tr'))); 
}); 

Answer 2

的index功能告诉你。

$(".test").click(function(){ 
    console.log("name: ", $(this).closest('td').parent().index()); 
}); 

另外请注意，你可能只需要使用.closest('tr')而非.closest('td').parent()。

$(".test").click(function(){ 
    console.log("name: ", $(this).closest('tr').index()); 
}); 

注意，虽然，你的标题行处于同一父数据行了，等会OCCUP的index = 0位置。如果你想避免这种情况，把它放在自己的thead与数据排在tbody：

<div class="table-style table-municipality table-edit-community-view"> 
    <table id="sum_table"> 
     <thead><!-- *** Note --> 
      <tr class="titlerow"> 
       <th>S.N.</th> 
       <th>Community</th> 
       <th>Address</th> 
       <th>Area</th> 
       <th>Estimated</th> 
       <th>Total</th> 
       <th>Action</th> 
      </tr> 
     </thead><!-- *** Note --> 
     <tbody><!-- *** Note --> 
      <? 
      $sn = 1; 
      while($result= mysql_fetch_row($res)) 
      { 
       ?> 
       <tr id="<?php echo $result[0];?>"> 
        <td align="center"><? echo $sn++; ?></td> 
        <td align="center"><? echo $result[1] ?></td> 
        <td align="center"><? echo $result[2] ?></td> 
        <td align="center" class="rowDataSd"><? echo $result[3] ?></td> 
        <td align="center" class="rowDataSd"><? echo $result[4] ?></td> 
        <td align="center" class="rowDataSd"><? echo $result[5] ?></td> 
        <td> 
         <button class="test">Test</button> 
        </td>      
       </tr> 
       <? 
      } 
      ?> 
     </tbody><!-- *** Note --> 
    </table> 
</div> 

它通常是使用thead和tbody反正最佳实践。

Answer 3

$(".test").click(function() { 
 
    console.log("name: ", $(this).closest('tbody tr').index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table-style table-municipality table-edit-community-view"> 
 
    <table id="sum_table"> 
 
    <thead> 
 
    <tr class="titlerow"> 
 
     <th>S.N.</th> 
 
     <th>Community</th> 
 
     <th>Address</th> 
 
     <th>Area</th> 
 
     <th>Estimated</th> 
 
     <th>Total</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
     <td align="center">1</td> 
 
     <td align="center">1</td> 
 
     <td align="center">1</td> 
 
     <td align="center" class="rowDataSd">1</td> 
 
     <td align="center" class="rowDataSd">1</td> 
 
     <td align="center" class="rowDataSd">1</td> 
 
     <td> 
 
     <button class="test">Test</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td align="center">2</td> 
 
     <td align="center">2</td> 
 
     <td align="center">2</td> 
 
     <td align="center" class="rowDataSd">2</td> 
 
     <td align="center" class="rowDataSd">2</td> 
 
     <td align="center" class="rowDataSd">2</td> 
 
     <td> 
 
     <button class="test">Test</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

使用tr与index()