以下是一个简单的汽车维修结算账单表格模板:
```html
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
/* 页面样式 */
body {
margin: 20px;
}
h1 {
text-align: center;
}
p {
margin-bottom: 20px;
}
日期:
项目 | 数量 | 单价 | 小计 |
---|---|---|---|
维修工时 | 160 | ||
零件费用 | 250 | ||
总计 | 410 |
// 获取当前日期
document.getElementById("date").textContent = new Date().toLocaleDateString();
// 计算小计和总计
function calculateTotals() {
const laborHours = parseFloat(document.getElementById("labor-hours").value);
const laborRate = parseFloat(document.getElementById("labor-rate").value);
const partsQuantity = parseFloat(document.getElementById("parts-quantity").value);
const partsPrice = parseFloat(document.getElementById("parts-price").value);
const laborTotal = laborHours * laborRate;
const partsTotal = partsQuantity * partsPrice;
const totalCost = laborTotal + partsTotal;
document.getElementById("labor-total").textContent = laborTotal.toFixed(2);
document.getElementById("parts-total").textContent = partsTotal.toFixed(2);
document.getElementById("total-cost").textContent = totalCost.toFixed(2);
}
// 输入框变化并计算更新
document.querySelectorAll("input").forEach(input => {
input.addEventListener("input", calculateTotals);
});
// 初次计算
calculateTotals();
```
这个模板包含了一个简单的汽车维修结算账单表格。它包含了以下元素:
1. 维修工时和单价输入框,可以计算出维修工时总费用。
2. 零件数量和单价输入框,可以计算出零件总费用。
3. 总计费用显示。
4. 当输入框值变化时,会自动计算并更新总计费用。
5. 页面顶部显示当前日期。
你可以根据实际需求对这个模板进行修改和扩充,比如增加更多的维修项目,添加备注等。希望这个模板对你有所帮助。
查看详情
查看详情