用HTML和js开发公工时表格,鼠标移到工时表格上,对应工时表格显示复核按钮,点击按钮后对应的单元表格右下角添加“已复核”字样
时间: 2024-02-15 18:02:57 浏览: 134
纯html+js,excel,多表合并去重,浏览器点开即可使用简单方便
好的,这个问题我可以回答。开发公工时表格需要用到HTML和JavaScript,具体步骤如下:
1. 首先,需要在HTML中创建一个表格,可以使用table标签来创建,其中每个单元格需要使用td标签来表示。
2. 在JavaScript中,需要为表格添加鼠标移动事件,可以使用onmouseover属性来实现,代码如下:
```javascript
document.getElementById("table").addEventListener("mouseover", function(event) {
// 鼠标移动到表格上时的代码
});
```
3. 在鼠标移动事件中,需要找到对应的单元格,并添加一个复核按钮。可以使用createElement方法来创建一个按钮元素,然后使用appendChild方法将其添加到单元格中,代码如下:
```javascript
var cell = event.target; // 获取鼠标所在的单元格
var button = document.createElement("button"); // 创建一个按钮元素
button.innerHTML = "复核"; // 设置按钮的文本内容
cell.appendChild(button); // 将按钮添加到单元格中
```
4. 添加复核按钮后,需要为按钮添加点击事件,当点击按钮时,在对应的单元格右下角添加“已复核”字样。可以使用onmousedown属性来实现,代码如下:
```javascript
button.onmousedown = function() {
var checked = document.createElement("div"); // 创建一个div元素
checked.innerHTML = "已复核"; // 设置div的文本内容
checked.style.position = "absolute"; // 设置div的定位方式为绝对定位
checked.style.bottom = "0"; // 设置div距离单元格底部的距离为0
checked.style.right = "0"; // 设置div距离单元格右侧的距离为0
cell.appendChild(checked); // 将div添加到单元格中
};
```
好了,以上就是用HTML和JavaScript开发公工时表格的步骤了。希望能够帮到你!
阅读全文