使用js table 写一个审批表
时间: 2024-02-21 15:01:15 浏览: 24
以下是一个简单的审批表的HTML和JavaScript代码,使用了table标签来展示审批表格,使用了JavaScript来动态添加和删除表格行并计算总金额。你可以根据需要进行修改和完善。
HTML代码:
```html
<table id="approval-table">
<thead>
<tr>
<th>申请人</th>
<th>申请金额</th>
<th>审批结果</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="applicant[]" /></td>
<td><input type="number" name="amount[]" /></td>
<td><select name="approval[]">
<option value="0">待审</option>
<option value="1">通过</option>
<option value="2">不通过</option>
</select></td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: right;">总金额:</td>
<td><span id="total-amount">0</span></td>
</tr>
<tr>
<td colspan="4" style="text-align: center;"><button onclick="addRow()">添加</button></td>
</tr>
</tfoot>
</table>
```
JavaScript代码:
```javascript
// 获取表格和总金额元素
var table = document.getElementById("approval-table");
var totalAmount = document.getElementById("total-amount");
// 添加行
function addRow() {
var tbody = table.querySelector("tbody");
var row = document.createElement("tr");
row.innerHTML = `
<td><input type="text" name="applicant[]" /></td>
<td><input type="number" name="amount[]" /></td>
<td><select name="approval[]">
<option value="0">待审</option>
<option value="1">通过</option>
<option value="2">不通过</option>
</select></td>
<td><button onclick="deleteRow(this)">删除</button></td>
`;
tbody.appendChild(row);
}
// 删除行
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
updateTotalAmount();
}
// 更新总金额
function updateTotalAmount() {
var amountInputs = table.querySelectorAll("input[name='amount[]']");
var total = 0;
for (var i = 0; i < amountInputs.length; i++) {
total += parseFloat(amountInputs[i].value) || 0;
}
totalAmount.innerText = total.toFixed(2);
}
updateTotalAmount(); // 初始化总金额
// 监听金额输入框的变化
table.addEventListener("input", function(event) {
if (event.target && event.target.name == "amount[]") {
updateTotalAmount();
}
});
```
这个审批表可以动态添加、删除行,并且可以计算总金额。你可以根据需要进行修改和完善。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)