在HTML表格的每一行添加图标按钮可以通过以下步骤实现:
<td>
标签来创建新的列。<button>
、<a>
或<span>
等元素来实现。以下是一个示例代码,演示如何在HTML表格的每一行添加一个删除按钮图标:
<!DOCTYPE html>
<html>
<head>
<style>
.delete-button {
background-color: #ff0000;
color: #ffffff;
border: none;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td><button class="delete-button" onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td><button class="delete-button" onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<script>
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
在上述示例中,我们使用了一个CSS类名delete-button
来设置删除按钮的样式。每个按钮都有一个onclick
属性,指定了一个JavaScript函数deleteRow()
作为点击事件的处理程序。该函数会找到按钮所在的行,并将其从表格中删除。
请注意,这只是一个简单的示例,你可以根据实际需求自定义按钮的样式和功能。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云