本文介绍: jquery写表格,通过后端传值,并合并单元格

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

效果如下

原文地址:https://blog.csdn.net/weixin_56381842/article/details/136039270

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_66973.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注