html开发一个表格,鼠标移动到工时表格上,对应的工时单元格显示“复核”按钮,点击复核按钮,工时单元格添加“已复核”字样
时间: 2023-12-16 10:05:28 浏览: 23
以下是一个简单的示例代码,你可以根据自己的需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>工时表格</title>
<style>
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
td:hover .review-btn {
display: inline-block;
}
.review-btn {
display: none;
background-color: #4CAF50;
color: white;
padding: 5px;
border-radius: 5px;
}
.reviewed {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>日期</th>
<th>工时</th>
<th>状态</th>
</tr>
<tr>
<td>2021-01-01</td>
<td class="workhours">8</td>
<td class="status"></td>
</tr>
<tr>
<td>2021-01-02</td>
<td class="workhours">6</td>
<td class="status"></td>
</tr>
<tr>
<td>2021-01-03</td>
<td class="workhours">7</td>
<td class="status"></td>
</tr>
</table>
<script>
var cells = document.querySelectorAll('.workhours');
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function() {
var statusCell = this.nextElementSibling;
if (!statusCell.classList.contains('reviewed')) {
statusCell.innerHTML = '<button class="review-btn" onclick="review(this)">复核</button>';
}
});
}
function review(btn) {
var statusCell = btn.parentNode;
statusCell.classList.add('reviewed');
statusCell.innerHTML = '已复核';
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个简单的工时表格,当鼠标移动到工时单元格上时,会显示一个“复核”按钮。当点击“复核”按钮时,工时单元格会添加“已复核”字样,并且变成绿色背景色,表示该单元格已经复核过。