表格--使用

1.表格固定头部，纵向滚动tbody　　

　　实现思路：表格的thead和tbody分离，thead和tbody分别使用div进行包裹。

　　　　　　　

　　　　　　　　　　　　　　// 头部
　　　　　　　　　　　　　　<div class="curOrganStaffTableWarpHead" style="width:476px;">
                              <table class="conglomerate-table"
                                  style="width: 100%; margin: 0 auto; border-collapse:     collapse;" cellspacing="0"
                                  cellpadding="0";table-layout:fixed;>
                                  <thead>
                                      <tr style="border: none;">
                                          <td>管理职级</td>
                                          <td>人数</td>
                                          <td>占比</td>
                                      </tr>
                                  </thead>
                              </table>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　// tbody部分  
　　　　　　　　　　　　　<div class="curOrganStaffTableWarp">
                              <table class="conglomerate-table"
                                  style="width: 100%; margin: 0 auto; border-collapse: collapse;" cellspacing="0"
                                  cellpadding="0">
                                  <tbody>
                                      <% var sum = _.sumBy(data, 'ManagerCount') %>
                                      <% _.forEach(data, function(item) { %>
                                          <tr>
                                              <td><%= item.ManageGradeName %></td>
                                              <td style="color: #2a8fe9;cursor:pointer;" detaillayer clicktype="1"  id="<%= item.Id ? item.Id : '' %>"><%= item.ManagerCount %></td>
                                              <td><%= item.Ratio? (item.Ratio * 100 ).toFixed(2) + '%':'-' %></td>
                                          </tr>
                                      <% }) %>
                                  </tbody>
                              </table>
                          </div>


　　　　　　//出现滚动条，表头宽度减小10px，和内容部分对齐
            var warp = document.getElementsByClassName('curOrganStaffTableWarp');
            var warpHead = document.getElementsByClassName('curOrganStaffTableWarpHead');
            for (var i = 0; i < warp.length; i++) {
                if (warp[i].clientHeight < warp[i].scrollHeight) {
                    $(warpHead[i]).css({ "width": "476px" });
                }
            }

2.表格横向滚动，固定第一列，表头和tbody都需要固定

　　实现思路，获取所有tr的第一个td，设置relative定位，脱离标准流，设置定位。

　　

<html>

<head>
    <title>表格的冻结列实现</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>

<body>
    <!--如果冻结列不好使，给tableDiv也设置一个position:relative;-->
    <div id="tableDiv" style="width:500px;overflow-x:auto;">
        <table style="width:720px;">
            <tr>
                <td style="width:100px;">迭代名称</td>
                <td style="width:80px;">得分</td>
                <td style="width:100px;">代码覆盖率</td>
                <td style="width:120px;">新需求个数</td>
                <td style="width:160px;">通过的需求个数</td>
                <td style="width:160px;">未通过的需求个数</td>
            </tr>
            <tr>
                <td>迭代一</td>
                <td>45</td>
                <td>56%</td>
                <td>450</td>
                <td>12</td>
                <td>90</td>
            </tr>
            <tr>
                <td>迭代五</td>
                <td>36</td>
                <td>78%</td>
                <td>216</td>
                <td>97</td>
                <td>12</td>
            </tr>
            <tr>
                <td>迭代三</td>
                <td>37</td>
                <td>91%</td>
                <td>404</td>
                <td>17</td>
                <td>34</td>
            </tr>
        </table>
    </div>
    <script>
        $("#tableDiv").scroll(function () { //给table外面的div滚动事件绑定一个函数
            var left = $("#tableDiv").scrollLeft(); //获取滚动的距离
            var trs = $("#tableDiv table tr"); //获取表格的所有tr
            trs.each(function (i) { //对每一个tr（每一行）进行处理
                //获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
                //相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
                //如果有必要也可以设置一个z-index属性
                $(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white" });
            });
        });

    </script>
</body>

</html>

 

posted on 2017-12-13 12:09  Diamond_xx  阅读(137)  评论(0)    收藏  举报

导航