工資表怎麼畫

想要畫好一份漂亮的工資表，需要從以下幾個方面進行考慮和實踐。

一、表格樣式

工資表的主體部分一般都是表格，因此表格的樣式設計至關重要，要考慮美觀性，同時也要保證表格數據的清晰易讀。

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