js tbale的最后一列是操作列,点击删除按钮可以触发onclick方法,删除该行记录。请问onclick怎么获取要删除的是哪一行?
时间: 2024-09-24 22:29:31 浏览: 24
原生JS操作网页给p元素添加onclick事件及表格隔行变色
在JavaScript中,如果你想在操作列的删除按钮点击事件中删除对应行的数据,你可以将每行的唯一标识绑定到数据上,然后在`onclick`事件处理函数中通过这个标识找到需要删除的那一行。这里有一个简单的示例:
```html
<table id="myTable">
<tr>
<td>...</td>
<td><button onclick="deleteRow(this)">删除</button></td>
<td data-id="1">... (这是唯一标识)</td>
</tr>
<!-- 其他行类似 -->
</table>
<script>
function deleteRow(deleteButton) {
const row = deleteButton.parentNode; // 获取点击按钮所在行
const rowId = row.querySelector('[data-id]').getAttribute('data-id'); // 获取唯一标识
// 现在你可以根据rowId从数据库或数组中删除相应数据
// 例如,删除服务器端对应id的数据
deleteData(rowId); // 假设这是一个删除数据的函数
// 删除DOM中的行
row.remove();
}
// 示例中的删除数据函数
function deleteData(id) {
// ... 实现删除逻辑
console.log(`删除了ID为${id}的行`);
}
</script>
```
在上述代码中,`deleteRow`函数获取了按钮的父元素(即那一行),然后找到并提取`data-id`属性值,这就是要删除的行的标识。
阅读全文