jquery写表格手动合并单元格

猴猴不是猴

已于 2024-02-05 11:46:01 修改

阅读量128

点赞数 2

文章标签：前端 jquery javascript

于 2024-02-05 11:44:38 首次发布

本文链接：https://blog.csdn.net/weixin_56381842/article/details/136039211

版权

该篇文章展示了如何使用HTML和jQuery构建一个带有表头合并功能的表格，通过JavaScript动态加载数据并填充到表格中。

摘要由CSDN通过智能技术生成

<!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>

效果如下