想要画好一份漂亮的工资表，需要从以下几个方面进行考虑和实践。

一、表格样式

工资表的主体部分一般都是表格，因此表格的样式设计至关重要，要考虑美观性，同时也要保证表格数据的清晰易读。

我们可以使用CSS对表格进行自定义样式，例如给表头和数据行分别设置不同背景色，并添加一些阴影效果，使得整个表格看起来更加分明。

<table class="salary"> <thead> <tr> <th>姓名</th> <th>基本工资</th> <th>奖金</th> <th>扣款</th> <th>实发工资</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>10000</td> <td>2000</td> <td>-1000</td> <td>11000</td> </tr> <tr> <td>李四</td> <td>8000</td> <td>1500</td> <td>-800</td> <td>8700</td> </tr> </tbody> </table> <style> .salary { border-collapse: collapse; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); width: 100%; text-align: center; } .salary thead { background-color: #f5f5f5; } .salary th { padding: 10px; font-weight: bold; } .salary tbody tr:nth-child(even) { background-color: #f9f9f9; } .salary td { padding: 10px; } </style>

二、数据统计

工资表中一般需要统计各种不同类型的数据，例如基本工资、奖金、扣款、税金等等。

我们可以使用JavaScript编写相应的计算脚本，以便在填写工资表时自动计算出各项数据的值，并在表格中显示出来。

<form> <label>姓名：<input type="text" name="name"></label> <label>基本工资：<input type="number" name="basicSalary"></label> <label>奖金：<input type="number" name="bonus"></label> <label>扣款：<input type="number" name="deduction"></label> <label>税金：<input type="number" name="tax"></label> <button type="button" onclick="calculateSalary()">计算工资</button> </form> <table class="salary"> <thead> <tr> <th>姓名</th> <th>基本工资</th> <th>奖金</th> <th>扣款</th> <th>税金</th> <th>应发工资</th> <th>实发工资</th> </tr> </thead> <tbody> <tr> <td><span id="name"></span></td> <td><span id="basicSalary"></span></td> <td><span id="bonus"></span></td> <td><span id="deduction"></span></td> <td><span id="tax"></span></td> <td><span id="totalSalary"></span></td> <td><span id="actualSalary"></span></td> </tr> </tbody> </table> <script> function calculateSalary() { const name = document.getElementsByName('name')[0].value; const basicSalary = Number(document.getElementsByName('basicSalary')[0].value); const bonus = Number(document.getElementsByName('bonus')[0].value); const deduction = Number(document.getElementsByName('deduction')[0].value); const tax = Number(document.getElementsByName('tax')[0].value); const totalSalary = basicSalary + bonus + deduction; const actualSalary = totalSalary - tax; document.getElementById('name').innerHTML = name; document.getElementById('basicSalary').innerHTML = basicSalary.toFixed(2); document.getElementById('bonus').innerHTML = bonus.toFixed(2); document.getElementById('deduction').innerHTML = deduction.toFixed(2); document.getElementById('tax').innerHTML = tax.toFixed(2); document.getElementById('totalSalary').innerHTML = totalSalary.toFixed(2); document.getElementById('actualSalary').innerHTML = actualSalary.toFixed(2); } </script>

三、导出功能

在制作完工资表之后，很可能需要将其导出成PDF或Excel格式，以方便后续的打印或者归档。

我们可以使用一些第三方库或者插件，例如jspdf或者exceljs，来实现工资表的导出功能。

以jspdf为例，可以使用其提供的API将表格内容渲染到PDF文档中，然后将文档保存到本地。

<button type="button" onclick="exportSalary()">导出工资单</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script> function exportSalary() { const doc = new jsPDF(); doc.autoTable({ html: '#salary-table' }); doc.save('salary.pdf'); } </script>

四、数据交互

如果工资表使用的是在线形式，那么我们还需要考虑如何进行数据交互。

这时候可以使用Ajax等技术，将表格数据发送到服务器上进行保存或者更新。

<form onsubmit="saveSalary(event)"> <!-- 表单内容 --> <button type="submit">提交工资单</button> </form> <script> function saveSalary(event) { event.preventDefault(); const formData = new FormData(event.target); fetch('/api/saveSalary', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data); // 处理保存成功后的响应 }) .catch(error => console.error(error)); } </script>