当前位置：首页 > article >正文

jquery写表格，通过后端传值，并合并单元格

article 2024/11/28 16:41:04


<!DOCTYPE html>
<html>
<head>
  <title>Table Using jQuery</title>
  <style>
  #tableWrapper {
    width: 100%;
    height: 200px; /* 设置表格容器的高度 */
    overflow: auto; /* 添加滚动条 */
    margin-top: -10px; /* 负的外边距值，根据实际情况调整 */
  }
  #table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0);
  }
  #table th,
  #table td {
    border: 1px solid #ccc;
    padding: 8px;
    background-color: #f9fafb;
  }
  #table tr:nth-child(odd) {
    background-color: #cfdff5;
  }
  #table th {
    background-color: #f9fafb;
    position: sticky;
    top: 0;
  }
  #tableWrapper {
  height: 200px; /* 设置表格容器的高度为固定值 */
  overflow: auto; /* 添加滚动条 */
}
#tableWrapper {
  height: 200px; /* 设置表格容器的高度为固定值 */
  overflow: auto; /* 添加滚动条 */
}

/* 设置滚动条的高度与表格容器的高度一致 */
#tableWrapper::-webkit-scrollbar {
  width: 10px;
  height: 100%; /* 设置滚动条的高度为100% */
}

/* 其他滚动条样式设置 */
#tableWrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

#tableWrapper::-webkit-scrollbar-thumb {
  background-color: #888;
}

#tableWrapper::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
  </style>
</head>
<body>
  <div id="tableWrapper">
    <table id="table">
      <thead>
        <tr>
          <th>日期</th>
        <th>姓名</th>
        <th>地址</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: '上海市普陀区金沙江路 1516 弄'
      }
    ];
    
    $(document).ready(function() {
      var $tableBody = $('#tableBody');
      
      $.each(tableData, function(index, item) {
        var $row = $('<tr>');
        
        if (index === 0) {
          $row.append($('<td>').attr('colspan', 2).text(item.date + ' / ' + item.name));
        } else {
          $row.append($('<td>').text(item.date));
          $row.append($('<td>').text(item.name));
        }
        
        $row.append($('<td>').text(item.address));
        
        $tableBody.append($row);
      });
    });
  </script>
</body>
</html>

效果如下