写一个简单的日产能报表网页版,可以填内容进去
时间: 2024-02-11 18:09:28 浏览: 21
以下是一个简单的日产能报表网页版的示例代码,使用了HTML和CSS:
```html
<!DOCTYPE html>
<html>
<head>
<title>日产能报表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #ddd;
}
input[type="number"] {
width: 100%;
box-sizing: border-box;
padding: 8px;
}
</style>
</head>
<body>
<h1>日产能报表</h1>
<table>
<tr>
<th>日期</th>
<th>生产线1产能</th>
<th>生产线2产能</th>
<th>总产能</th>
</tr>
<tr>
<td><input type="text" name="date"></td>
<td><input type="number" name="capacity1"></td>
<td><input type="number" name="capacity2"></td>
<td><input type="number" name="total" readonly></td>
</tr>
</table>
<script>
// 计算总产能
var capacity1Input = document.getElementsByName("capacity1")[0];
var capacity2Input = document.getElementsByName("capacity2")[0];
var totalInput = document.getElementsByName("total")[0];
capacity1Input.addEventListener("input", calculateTotalCapacity);
capacity2Input.addEventListener("input", calculateTotalCapacity);
function calculateTotalCapacity() {
var capacity1 = parseInt(capacity1Input.value);
var capacity2 = parseInt(capacity2Input.value);
if (!isNaN(capacity1) && !isNaN(capacity2)) {
totalInput.value = capacity1 + capacity2;
} else {
totalInput.value = "";
}
}
</script>
</body>
</html>
```
这个报表包括一个表格,其中有一个输入框用于输入日期,两个数字输入框用于输入生产线1和生产线2的产能,以及一个只读的数字输入框用于显示总产能。使用JavaScript计算总产能,并在输入框中显示结果。