开发公工时表格,鼠标移到工时表格上,对应工时表格显示复核按钮,点击按钮后对应的单元表格右下角添加“已复核”字样
时间: 2023-12-23 10:05:52 浏览: 130
你可以使用 jQuery 来实现这个功能。具体实现方法如下:
1. 给工时表格中的每个单元格添加一个 class 名称,例如 `hour-cell`。
2. 给每个单元格添加一个鼠标移入事件(`mouseenter`),在事件中显示复核按钮。
3. 给每个按钮添加一个点击事件(`click`),在事件中找到对应单元格并添加“已复核”字样。
下面是示例代码:
```
<table>
<tr>
<th>日期</th>
<th>工时</th>
<th>操作</th>
</tr>
<tr>
<td>1月1日</td>
<td class="hour-cell">8</td>
<td class="operation-cell"></td>
</tr>
<tr>
<td>1月2日</td>
<td class="hour-cell">7</td>
<td class="operation-cell"></td>
</tr>
<!-- 其他行省略 -->
</table>
<style>
.operation-cell {
position: relative;
}
.check-btn {
display: none;
position: absolute;
right: 0;
bottom: 0;
}
.hour-cell:hover .check-btn {
display: block;
}
</style>
<script>
// 鼠标移入单元格时显示复核按钮
$('.hour-cell').mouseenter(function () {
var $operationCell = $(this).siblings('.operation-cell');
$operationCell.html('<button class="check-btn">复核</button>');
});
// 点击按钮后添加“已复核”字样
$('.operation-cell').on('click', '.check-btn', function () {
$(this).parent().prev('.hour-cell').append('<div>已复核</div>');
});
</script>
```
在上面的代码中,我们给每个工时单元格添加了一个 `hour-cell` 的 class 名称,用于方便后续查找。在 CSS 中,我们为操作单元格(即复核按钮所在单元格)设置了 `position: relative;` 属性,为复核按钮设置了 `display: none;` 属性,用于初始状态下隐藏按钮。
在 JS 中,我们为每个工时单元格添加了一个鼠标移入事件,当鼠标移入时,会在对应操作单元格中添加一个复核按钮。然后,我们为每个复核按钮添加了一个点击事件,当点击时,会找到对应工时单元格,并在其右下角添加“已复核”字样。
需要注意的是,在 JS 中,我们使用了 `on()` 方法来绑定点击事件,这是因为按钮是动态生成的,如果使用 `click()` 方法来绑定事件,则可能会出现事件无法响应的问题。
阅读全文