我如何找到表中的行索引

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()