工资表怎么画

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

一、表格样式

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

我们可以使用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>