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

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

试试这个方法：

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

或尝试

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

Answer 2

您的问题在这一行：

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

根据documentation：

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

由于您的按钮是 div 中包含的唯一元素，因此对应的结果将始终为 0。

为了获取行索引，取而代之，获取最近的tr的索引就足够了：

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

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

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

<script src="https://ajax.googleapis.com/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>

Answer 3

你可以这样做：

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

<script src="https://ajax.googleapis.com/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>