需要一个可以自动计算加减结果的HTML表格,并包含日期 产品1 产品2 产品3 目标数据 现有数据、差距以及每日 产品1 产品2 产品3产品增加或减少的数据
时间: 2024-04-11 17:27:19 浏览: 34
您好!对于您的需求,我可以帮您创建一个包含日期、产品和数据计算的HTML表格。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>产品数据表格</title>
</head>
<body>
<table>
<tr>
<th>日期</th>
<th>产品1</th>
<th>产品2</th>
<th>产品3</th>
<th>目标数据</th>
<th>现有数据</th>
<th>差距</th>
<th>每日增减</th>
</tr>
<tr>
<td>日期1</td>
<td><input type="number" id="p1-d1"></td>
<td><input type="number" id="p2-d1"></td>
<td><input type="number" id="p3-d1"></td>
<td><input type="number" id="target-d1"></td>
<td><input type="number" id="current-d1"></td>
<td><input type="number" id="gap-d1" readonly></td>
<td><input type="number" id="daily-diff-d1" readonly></td>
</tr>
<!-- 添加更多行以适应您的需求 -->
</table>
<script>
// 计算差距和每日增减
function calculate() {
var p1 = parseFloat(document.getElementById("p1-d1").value);
var p2 = parseFloat(document.getElementById("p2-d1").value);
var p3 = parseFloat(document.getElementById("p3-d1").value);
var target = parseFloat(document.getElementById("target-d1").value);
var current = parseFloat(document.getElementById("current-d1").value);
var gap = target - current;
var dailyDiff = gap / 30; // 假设每个月30天
document.getElementById("gap-d1").value = gap;
document.getElementById("daily-diff-d1").value = dailyDiff;
}
// 在输入框值发生变化时重新计算
var inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function (input) {
input.addEventListener("input", calculate);
});
</script>
</body>
</html>
```
以上代码创建了一个包含日期、产品和数据计算的表格。您可以根据需要添加更多行。每行中的输入框用于输入相关数据,差距和每日增减将自动计算并显示在对应的输入框中。
注意:这只是一个简单的示例代码,您可能需要根据实际需求进行修改和扩展。希望对您有所帮助!如果您有任何问题,请随时提问。