js动态生成table表格，加滚动条

最新推荐文章于 2026-05-26 11:46:56 发布
原创最新推荐文章于 2026-05-26 11:46:56 发布 · 10w+ 阅读
8 ·
本内容遵循CC 4.0 BY-SA版权协议
标签
#javascript
JavaScript 专栏收录该内容
27 篇文章
订阅专栏
效果：
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
/* 表格容器样式，用flex布局可保证table内容能铺满剩余空间 */
.tbl-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 设置表格的布局方式，用于宽度对齐 */
.tbl-header table{
  border-bottom: none;
  border-bottom-style: none;
  table-layout: fixed;
}

.tbl-body table {
  table-layout: fixed;
}

/* 设置表格内容容器，用于铺满整个剩余空间 */

.tbl-header {
  padding-right: 17px;
}

.tbl-body {
  height: 160px;
  overflow-y: scroll;
}
 table {
            border-collapse: collapse;
        }
        table th{
            width: 80px;
            height: 25px;
            text-align: center;
            background-color: cornsilk;
        }

        table td{
            width: 80px;
            height: 25px;
            text-align: center;

        }

</style>
</head>

<body>



<!-- 表格容器，可用于设置整个的边框及高度 -->
  <div class="tbl-container">
  <!-- 表头容器，必须留出17px的滚动条位置 -->   
    <div class="tbl-header">
      <table>
        <thead>
          <tr>
            <th >排名</th>
            <th >业务员</th>
            <th >金额</th>
			<th >订单</th>
			<th >客户</th>
          </tr>
        </thead>
      </table>
    </div>
    <!-- 表格内容容器-->
    <div class="tbl-body">
      <table >
      <tbody>
        
      </tbody>
      </table>
    </div>
  </div>
<script>
        // 1.先去准备好学生的数据
        var datas = [{
            name1: '小明',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 100
        }, {
            name1: '小新',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 98
        }, {
            name1: '小夏',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 99
        }, {
            name1: '小玉',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 88
        }, {
            name1: '小猪',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 0
        },{
            name1: '小明',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 100
        }, {
            name1: '小新',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 98
        }, {
            name1: '小夏',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 99
        }, {
            name1: '小玉',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 88
        }, {
            name1: '小猪',
            subject1: '1',
			name: '小明',
            subject: '1',
            score: 0
        }];
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行

        var tbody = document.querySelector('tbody');

        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
         
        }
        
    </script>
	</body>

</html>