How can I find the index of row in the table

I have one html table which consists of a button on each row. When I click on that button I want to get the index of the row. With my code I am getting the index value but it starts with 1 instead of 0. In other examples I saw that row index is starting from value "0", but in my case it starts with "1". Can anybody help me where I did mistake.

Here is my table.

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

script:

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

Answers 1

  • $(".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>

    Use tr with index()


Related Articles