写一个前端(.html)网页代码,网页含一个add按钮和三列表格,表头为物料编号、物料种类,操作。第三列为两个button按钮。点击add按钮出现弹窗,弹窗内包含物料编号、物料种类输入框和确定按钮。输入点击确定后,所填内容显示到网页表格中。
时间: 2024-03-23 20:40:09 浏览: 55
请注意,我为了方便起见,在回答中省略了一些详细的样式和交互细节,如果需要完整的代码和样式,可以自行搜索或咨询前端开发人员。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加物料</title>
</head>
<body>
<button id="add-btn">添加</button>
<table>
<thead>
<tr>
<th>物料编号</th>
<th>物料种类</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body">
<!-- 这里是表格内容,初始为空 -->
</tbody>
</table>
<!-- 弹窗 -->
<div id="dialog" style="display: none">
<label for="material-id-input">物料编号:</label>
<input type="text" id="material-id-input"><br>
<label for="material-type-input">物料种类:</label>
<input type="text" id="material-type-input"><br>
<button id="dialog-ok-btn">确定</button>
</div>
<script>
// 获取元素
const addBtn = document.getElementById('add-btn');
const tableBody = document.getElementById('table-body');
const dialog = document.getElementById('dialog');
const dialogOkBtn = document.getElementById('dialog-ok-btn');
const materialIdInput = document.getElementById('material-id-input');
const materialTypeInput = document.getElementById('material-type-input');
// 添加事件监听
addBtn.addEventListener('click', () => {
dialog.style.display = 'block'; // 显示弹窗
});
dialogOkBtn.addEventListener('click', () => {
const materialId = materialIdInput.value;
const materialType = materialTypeInput.value;
const tr = document.createElement('tr'); // 创建一个新行
const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');
const editBtn = document.createElement('button');
const deleteBtn = document.createElement('button');
td1.textContent = materialId;
td2.textContent = materialType;
editBtn.textContent = '编辑';
deleteBtn.textContent = '删除';
td3.appendChild(editBtn);
td3.appendChild(deleteBtn);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tableBody.appendChild(tr); // 添加到表格中
dialog.style.display = 'none'; // 隐藏弹窗
materialIdInput.value = ''; // 清空输入框
materialTypeInput.value = '';
});
</script>
</body>
</html>
```
阅读全文