正确获取单击按钮的行索引

Question

我尝试了多种方法来获取表内单击按钮的行索引。

桌子：

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>";
}
?>

这些是我尝试过的方法：

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

但它总是返回-1。

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

这将返回undefined。

Answer 1

您的问题在这一行：

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

根据文档：

.index()：从匹配的元素中搜索给定的元素。

因为您的按钮是 div 中包含的唯一元素，所以相应的结果将始终为 0。

相反，为了获取行索引，获取最接近的 tr 的索引就足够了：

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

在第二种方法中，您尝试获取单击按钮的rowIndex 。但该属性仅与表行元素相关。因此，在这种情况下，您将得到undefined。

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

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