jquery写表格手动合并单元格

<!DOCTYPE html>
<html>

<head>
  <style>
    .special-row th:first-child,
    .special-row th:nth-child(2) {
      background-color: yellow;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="tableWrapper"> <!-- 添加包裹表格的容器 -->
    <table id="table">
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
          <th>地址</th>
        </tr>
        <tr class="special-row">
          <th colspan="2">表头合并单元格</th>
        </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var tableData = [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }
    ]

    $(document).ready(function () {
      var $tableBody = $('#tableBody')
      var $tableHead = $('#table')
      $.each(tableData, function (index, item) {
        var $row = $('<tr>')
        $row.append($('<td>').text(item.date))
        $row.append($('<td>').text(item.name))
        $row.append($('<td>').text(item.address))
        $tableBody.append($row)

      })
    });
  </script>
</body>

</html>

效果如下