使用js将下列的工资表保存到变量salary里,工时表保存到hours里。 网页上显示一个姓名下拉列表,选择对应的姓名,下面动态显示工资表和工时表,及对应的工资和工时小计。
时间: 2024-02-18 22:03:45 浏览: 121
js实现下班提示网页,倒计时钟表显示和时间显示,打工人必备源代码!
假设工资表和工时表的数据如下:
```javascript
const salary = {
'张三': {
'基本工资': 5000,
'加班费': 2000,
'奖金': 1000
},
'李四': {
'基本工资': 6000,
'加班费': 1500,
'奖金': 1200
},
'王五': {
'基本工资': 7000,
'加班费': 1800,
'奖金': 1500
}
};
const hours = {
'张三': {
'正常工时': 160,
'加班工时': 80
},
'李四': {
'正常工时': 170,
'加班工时': 50
},
'王五': {
'正常工时': 180,
'加班工时': 70
}
};
```
接下来可以使用下面的代码创建一个选择框和一个用于显示工资表和工时表的表格:
```html
<select id="nameList">
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select>
<table>
<thead>
<tr>
<th>项目</th>
<th>工资表</th>
<th>工时表</th>
</tr>
</thead>
<tbody>
<tr>
<td>基本工资</td>
<td id="baseSalary"></td>
<td id="normalHours"></td>
</tr>
<tr>
<td>加班费</td>
<td id="overtimePay"></td>
<td id="overtimeHours"></td>
</tr>
<tr>
<td>奖金</td>
<td id="bonus"></td>
<td></td>
</tr>
<tr>
<td>小计</td>
<td id="totalSalary"></td>
<td id="totalHours"></td>
</tr>
</tbody>
</table>
```
最后,使用下面的代码实现根据选择框的选项更新表格的内容:
```javascript
const nameList = document.getElementById('nameList');
const baseSalary = document.getElementById('baseSalary');
const overtimePay = document.getElementById('overtimePay');
const bonus = document.getElementById('bonus');
const normalHours = document.getElementById('normalHours');
const overtimeHours = document.getElementById('overtimeHours');
const totalSalary = document.getElementById('totalSalary');
const totalHours = document.getElementById('totalHours');
// 初始化表格
updateTable('张三');
// 监听选择框的变化,更新表格
nameList.addEventListener('change', function() {
updateTable(this.value);
});
function updateTable(name) {
// 更新工资表
baseSalary.textContent = salary[name]['基本工资'];
overtimePay.textContent = salary[name]['加班费'];
bonus.textContent = salary[name]['奖金'];
// 更新工时表
normalHours.textContent = hours[name]['正常工时'];
overtimeHours.textContent = hours[name]['加班工时'];
// 更新小计
totalSalary.textContent = salary[name]['基本工资'] + salary[name]['加班费'] + salary[name]['奖金'];
totalHours.textContent = hours[name]['正常工时'] + hours[name]['加班工时'];
}
```
这样就可以根据选择框的选项动态显示工资表和工时表了,并且自动计算对应的工资和工时小计。
阅读全文