<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>房租水电费记账本(内置数组数据版)</title>
<style>
table {
user-select: none;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2"> <input type="month" id="monthInput"></th>
<th colspan="6">
2024年7月25号开始(303)房租水电费记账本(押金500元)</th>
</tr>
<tr>
<th>月份</th>
<th>房租(500元/月)</th>
<th>水费(5元/吨)</th>
<th>电费(1元/度)</th>
<th>总额(元)</th>
<th>实缴(元)</th>
<th>备注</th>
</tr>
</thead>
<tbody id="monthRows">
<!-- 月份行将动态生成 -->
</tbody>
<tfoot>
<tr>
<td><strong>总和</strong></td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>无</td>
</tr>
</tfoot>
</table>
</body>
<script>
const records = [
{
日期: '2024年7月25号',
房租: 1000, // 房租:10000元
水: 66, // 水:66吨
电: 2316, // 电:2316度
实缴: 1000, // 实缴1000元
备注: '房租月份为2024年7月25号开始,开始交一个月房租500元+500元押金=1000元'
},
{
日期: '2024年8月25号',
房租: 1500,
水: 68,
电: 2537,
实缴: 1731,
备注: '8月份开始交3个月房租,房租3-1剩2'
},
/* {
日期: '2024年9月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租3-2剩1'
},
{
日期: '2024年10月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租3-3剩0'
},
{
日期: '2024年11月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租开始交房租'
},*/
];
// 获取月份输入框和月份行容器
const monthInput = document.getElementById('monthInput');
const monthRows = document.getElementById('monthRows');
const tfootCells = document.querySelectorAll('tfoot td');
// 监听月份输入框的变化
monthInput.addEventListener('change', function () {
// 清空之前的月份行
monthRows.innerHTML = '';
// 初始化总和变量
let totalRent = 0;
let totalWater = 0;
let totalElectric = 0;
let totalAmount = 0;
let totalPaid = 0;
// 获取选择的年月
const selectedMonth = monthInput.value;
if (!selectedMonth) return; // 如果未选择月份,直接返回
const [year, month] = selectedMonth.split('-');
const selectedYear = parseInt(year);
const selectedMonthNum = parseInt(month);
console.log('Selected Month:', selectedMonth);
console.log('Selected Year:', selectedYear);
console.log('Selected Month Num:', selectedMonthNum);
// 创建一个包含所有月份的数组
const allMonths = Array.from({ length: 12 }, (_, i) => i + 1);
// 遍历所有月份
allMonths.forEach(monthNum => {
// 查找与当前月份匹配的记录
const matchedRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
if (isNaN(recordDate.getTime())) {
console.error(`Invalid date: ${record.日期}`);
return false; // 如果日期无效,跳过该记录
}
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum;
});
console.log('Matched Record:', matchedRecord);
// 创建新的行
const newRow = document.createElement('tr');
// 添加月份单元格
const monthCell = document.createElement('td');
monthCell.textContent = `${monthNum}月`; // 不显示年份
newRow.appendChild(monthCell);
if (matchedRecord) {
// 添加房租单元格
const rentCell = document.createElement('td');
rentCell.textContent = `${matchedRecord.房租}元`;
newRow.appendChild(rentCell);
totalRent += matchedRecord.房租;
// 计算水费
const prevWaterRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum - 1;
});
const waterUsage = prevWaterRecord ? (matchedRecord.水 - prevWaterRecord.水) * 5 : 0; // 如果没有前一个记录,水费为0
const waterCell = document.createElement('td');
waterCell.textContent = `${matchedRecord.水} - ${prevWaterRecord ? prevWaterRecord.水 : matchedRecord.水} = ${prevWaterRecord ? matchedRecord.水 - prevWaterRecord.水 : 0} * 5 = ${waterUsage}元`;
newRow.appendChild(waterCell);
totalWater += waterUsage;
// 计算电费
const prevElectricRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum - 1;
});
const electricUsage = prevElectricRecord ? (matchedRecord.电 - prevElectricRecord.电) * 1 : 0; // 如果没有前一个记录,电费为0
const electricCell = document.createElement('td');
electricCell.textContent = `${matchedRecord.电} - ${prevElectricRecord ? prevElectricRecord.电 : matchedRecord.电} = ${prevElectricRecord ? matchedRecord.电 - prevElectricRecord.电 : 0} * 1 = ${electricUsage}元`;
newRow.appendChild(electricCell);
totalElectric += electricUsage;
// 计算总和单元格
const totalCell = document.createElement('td');
let totalAmountForMonth = matchedRecord.房租 + waterUsage + electricUsage;
totalCell.textContent = `房租: ${matchedRecord.房租}元 + 水费: ${waterUsage}元 + 电费: ${electricUsage}元 = ${totalAmountForMonth}元`; // 显示计算过程
newRow.appendChild(totalCell);
totalAmount += totalAmountForMonth; // 累加到总和
// 添加实缴单元格
const paidCell = document.createElement('td');
paidCell.textContent = `${matchedRecord.实缴}元`;
newRow.appendChild(paidCell);
totalPaid += matchedRecord.实缴;
// 添加备注单元格
const remarkCell = document.createElement('td');
remarkCell.textContent = matchedRecord.备注;
newRow.appendChild(remarkCell);
} else {
// 如果没有匹配的记录,显示默认值
const defaultCells = ['0元', '0元', '0元', '0元', '0元', '无'];
defaultCells.forEach(text => {
const cell = document.createElement('td');
cell.textContent = text;
newRow.appendChild(cell);
});
}
// 将新行添加到月份行容器中
monthRows.appendChild(newRow);
});
// 更新总和单元格
tfootCells[1].textContent = `${totalRent}元`;
tfootCells[2].textContent = `${totalWater}元`;
tfootCells[3].textContent = `${totalElectric}元`;
tfootCells[4].textContent = `${totalAmount}元`;
tfootCells[5].textContent = `${totalPaid}元`;
});
</script>
</html>
09-09
1998
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-11
109
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)