最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Get row index of clicked button properly - Stack Overflow

programmeradmin2浏览0评论

I've tried several ways to get the row index of a clicked button inside a table.

The table:

while ($info = mysqli_fetch_array($sql)) {
    echo "<tr>";
        echo "<th>{$info['name']}</th>";
        echo "<th>{$info['pass']}</th>";
        echo "<th><a href='http://{$info['link']}'>{$info['link']}</a></th>";
        echo "<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal' id='{$info['id']}'>Delete</button></div></th>";
    echo "</tr>";
}
?>

These are the ways that I've tried:

$(document).on('click', '.delbuttons button', function(event) {
    alert($(this).index());
}

but it always returns -1.

$(document).on('click','.delbuttons button', function(event) {
    alert(this.rowIndex);
}

This returns undefined.

I've tried several ways to get the row index of a clicked button inside a table.

The table:

while ($info = mysqli_fetch_array($sql)) {
    echo "<tr>";
        echo "<th>{$info['name']}</th>";
        echo "<th>{$info['pass']}</th>";
        echo "<th><a href='http://{$info['link']}'>{$info['link']}</a></th>";
        echo "<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal' id='{$info['id']}'>Delete</button></div></th>";
    echo "</tr>";
}
?>

These are the ways that I've tried:

$(document).on('click', '.delbuttons button', function(event) {
    alert($(this).index());
}

but it always returns -1.

$(document).on('click','.delbuttons button', function(event) {
    alert(this.rowIndex);
}

This returns undefined.

Share Improve this question edited Apr 9, 2018 at 13:58 BritishWerewolf 3,9685 gold badges33 silver badges53 bronze badges asked Apr 6, 2018 at 19:48 MattiaMattia 6,5443 gold badges30 silver badges42 bronze badges 1
  • Wele back :-). -- Why <th> rather than <td>? – Randy Casburn Commented Apr 6, 2018 at 19:50
Add a ment  | 

4 Answers 4

Reset to default 5

Your issue is in this line:

alert($(this).index());

According to the documentation:

.index(): Search for a given element from among the matched elements.

Because your button is the unique element contained in the div the correspondig result will be always 0.

In order to get the row index, instead, it is sufficient to get the index of the closest tr:

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

In your second approach you try to get the rowIndex of the clicked button. But this attribute is related only to a table row element. Hence, in this case you will get undefined.

$(document).on('click','.delbuttons button', function(event) {
    console.log($(this).closest('tr').index());
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>name1</td>
        <td>pass1</td>
        <td><a href="http://xxx">xxx</a></td>
        <td>
            <div class="delbuttons">
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id1"> Delete</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>name2</td>
        <td>pass2</td>
        <td><a href="http://xxx">xxx</a></td>
        <td>
            <div class="delbuttons">
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id2"> Delete</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>name3</td>
        <td>pass3</td>
        <td><a href="http://xxx">xxx</a></td>
        <td>
            <div class="delbuttons">
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id3"> Delete</button>
            </div>
        </td>
    </tr>
</table>

This is the easiest solution i found:

event.target.closest('tr').rowIndex
  1. event.target gets the current button that fired the event and executing this function.
  2. closest('tr') gets the row that contains the current button.
  3. rowIndex gets the index of the row in its table.

You could do:

$(document).on('click','.delbuttons button', function() {
    console.log($(this).closest('tr').get(0).rowIndex);
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>

             <th>A</th>
             <th>B</th>
             <th>C</th>
             <th><div class='delbuttons'><button  class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
             <tr>

             <th>A</th>
             <th>B</th>
             <th>C</th>
             <th><div class='delbuttons'><button  class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
             </table>

try at this way:

$(document).on('click','.delbuttons button', function() {
     console.log($(this).closest("tr").index(););
});

or try to

$(document).on('click','.delbuttons button', function() {
     console.log($(this).parent().index(););
});
发布评论

评论列表(0)

  1. 暂无评论