我已经尝试了几种方法来获取表格中单击按钮的行索引。
表格:
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);
}
返回未定义。
答案 0 :(得分:2)
您的问题在这一行:
alert($(this).index());
.index():从匹配的元素中搜索给定元素。
因为您的按钮是div中包含的唯一元素,所以对应结果将始终为0.
为了获得行索引,只需获取最接近的tr的索引
即可$(this).closest('tr').index()
在第二种方法中,您尝试获取点击按钮的rowIndex。但是此属性仅与表行元素相关。因此,在这种情况下,您将获得未定义。
$(document).on('click','.delbuttons button', function(event) {
console.log($(this).closest('tr').index());
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
你可以这样做:
$(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>
答案 2 :(得分:0)
尝试这样:
$(document).on('click','.delbuttons button', function() {
console.log($(this).closest("tr").index(););
});
或尝试
$(document).on('click','.delbuttons button', function() {
console.log($(this).parent().index(););
});