在前端开发中,可以通过以下步骤将按钮添加、删除和编辑到表格中:
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions</th>
</tr>
<tr>
<td id="row1-id">1</td>
<td id="row1-name">John</td>
<td>
<button id="edit-btn1">Edit</button>
<button id="delete-btn1">Delete</button>
</td>
</tr>
<!-- 添加更多行 -->
</table>
button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
// 获取按钮和表格中的元素
const editBtn1 = document.getElementById('edit-btn1');
const deleteBtn1 = document.getElementById('delete-btn1');
const row1Id = document.getElementById('row1-id');
const row1Name = document.getElementById('row1-name');
// 编辑按钮点击事件
editBtn1.addEventListener('click', () => {
const newName = prompt('Enter a new name:');
if (newName) {
row1Name.textContent = newName;
}
});
// 删除按钮点击事件
deleteBtn1.addEventListener('click', () => {
const confirmDelete = confirm('Are you sure you want to delete this row?');
if (confirmDelete) {
row1Id.parentNode.parentNode.remove();
}
});
以上代码示例中,我们通过JavaScript获取按钮和表格中的元素,并为编辑按钮和删除按钮分别添加了点击事件。当编辑按钮被点击时,会弹出一个提示框,用户可以输入新的名称,然后更新表格中对应的单元格内容。当删除按钮被点击时,会弹出一个确认框,用户确认后会删除整行数据。
这种方式可以应用于任意数量的行,只需按照相同的结构添加更多的行,并在JavaScript中处理相应的事件即可。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云