当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS表头与第一列、第二列、最后一列锁定功能JS源码

HDHCMS表头与第一列、第二列、最后一列锁定功能JS源码

时间:2020/7/16 10:17:00 【admin】

在WEB应用系统的开发过程中,有很多功能需要用到数据的列表展示,有时需要展示多列的数据,但限于屏幕的宽度多列显示时一般左边1、2列是对行数据的识别,如果不加以处理或固定左边或表头的数据,列表的查询体验会很差,很难识别数据的归属与属性,因此必须通过技术手段来锁定表头或指定的列,这样无论如何拉滚动条都可…

本文源码:HdhCmsFixTableHead.rar

在WEB应用系统的开发过程中,有很多功能需要用到数据的列表展示,有时需要展示多列的数据,但限于屏幕的宽度多列显示时一般左边1、2列是对行数据的识别,如果不加以处理或固定左边或表头的数据,列表的查询体验会很差,很难识别数据的归属与属性,因此必须通过技术手段来锁定表头或指定的列,这样无论如何拉滚动条都可以轻松识别到数据的表头与列的属性,下面我们来看一下源码,jquery8.0饮食在压缩文件中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>HDHCMS表头与第一列、第二列、最后一列锁定功能JS源码</title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>

</head>

<body>

    <div id="HdhCmsWkj">

        <table id="HdhCmsTable" border="1" cellspacing="0" cellpadding="0">

            <thead>

                <tr>

                    <th>表头1</th>

                    <th>表头2</th>

                    <th>表头3</th>

                    <th>表头4</th>

                    <th>表头5</th>

                    <th>表头6</th>

                    <th>表头7</th>

                    <th>表头8</th>

                    <th>表头9</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/16 9:18:15</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/16 9:18:06</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/15 8:50:47</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61253')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/15 8:50:39</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61252')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/14 9:30:33</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81337')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/14 9:19:32</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61250')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/13 14:40:45</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61249')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/13 8:45:49</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61248')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/13 8:30:53</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61243')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/13 8:30:44</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61242')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/11 9:36:53</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61241')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/11 8:29:24</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61239')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/10 15:42:31</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61238')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/9 11:01:26</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81336')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 15:31:30</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61237')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 14:58:04</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61236')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 13:49:16</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61234')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 13:28:49</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61233')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 13:28:48</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61224')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/7 13:28:40</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61223')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/6 10:15:24</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61222')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/4 8:43:21</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61221')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/3 14:57:32</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81335')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/3 14:56:12</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81334')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/3 8:24:30</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61220')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/2 11:00:40</td>

                    <td>192.168.168.134</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61219')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/1 17:09:14</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('61218')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/1 9:56:09</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81333')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/1 9:29:04</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81332')">详情</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        <span>HdhCmsOne</span><br />



                    </td>

                    <td><span> HdhCms.Com</span><br /></td>

                    <td>www.HdhCms.Com</td>

                    <td>技术部门</td>

                    <td>登录</td>

                    <td>2020/7/1 9:23:57</td>

                    <td>192.168.0.138</td>

                    <td>


                        用户:HdhCms.Com[HdhCmsOne]有进行操作。

                    </td>

                    <td>

                        <a href="#" onclick="HdhCmsToHref('81331')">详情</a>

                    </td>

                </tr>


            </tbody>

        </table>

    </div>


    <style>

        html, body {

            margin: 0px;

            padding: 0px;

        }


        table tr td label {

            color: #007cff;

            cursor: pointer;

        }


        table tr td {

            padding-bottom: 12px;

            padding-top: 12px;

            font-size: 12px;

        }


        table span {

            margin-left: 12px;

        }


        table thead th {

            border-top: 3px solid #007cff;

            background-color: #f6fafd;

        }


            table thead th:last-child {

                border-top: 0;

            }


        table th {

            font-family: 'Microsoft YaHei';

            font-size: 14px;

            color: #333333;

            line-height: 45px;

            width: 160px;

        }



        table {

            table-layout: fixed; /*使用fixed实现th固定宽度*/

            width: 100%; /*在使用fixed的时候,必须指定width,否则还是自适应宽度*/

            border-collapse: separate; /*头和列固定必须得用这个,否则滚动时,th和td的border就不见了*/

            border-spacing: 0;

            text-align: center;

            transform-style: preserve-3d;

        }


            table th:nth-child(1) {

                width: 120px !important;

                max-width: 120px !important;

            }


            table th:nth-child(2) {

                width: 150px !important;

                max-width: 150px !important;

            }


            table th:nth-child(3) {

                width: 200px !important;

            }


            table th:nth-child(4) {

                width: 200px !important;

            }


            table th:nth-child(5) {

                width: 105px !important;

            }


            table th:nth-child(6) {

                width: 200px !important;

            }


            table th:nth-child(7) {

                width: 150px !important;

            }


            table th:nth-child(8) {

                width: 500px !important;

                padding-right: 1rem;

            }


            table th:nth-child(9) {

                width: 117.5px !important;

            }


        tbody td:nth-child(9) {

            width: 133.5px !important;

        }


        th, td {

            white-space: nowrap;

        }


        #HdhCmsTable_tableFix2 > table > thead > tr > th {

            display: none;

        }


        #HdhCmsTable_tableLayout {

            width: auto;

            max-width: 1470px !important;

            clear: both;

            overflow: inherit !important;

            padding-top: 2rem;

        }


        #HdhCmsTable_tableFix2 {

            left: 0.5px !important;

            background-color: transparent !important;

        }


        #HdhCmsTable_tableColumn2 {

            left: -15px !important;

            /*margin-right: 1rem;*/

        }


        #HdhCmsTable_tableHead {

            margin-left: -0.95rem;

            width: auto !important;

        }


        #HdhCmsTable {

            clear: both;

            text-align: center;

        }


        #HdhCmsTable_tableFix2 th {

            border-right: 0;

        }


        #HdhCmsTable_tableFix2 > table {

            border-top: 3px solid #007CFF !important;

        }


        #HdhCmsTable_tableFix2 > table {

            border-right: 0 !important;

        }


        #HdhCmsTable_tableData {

            width: 100% !important;

            border-collapse: separate;

            scrollbar-arrow-color: #000; /*顶部/底部图标颜色*/

            scrollbar-face-color: #333; /*滚动条颜色*/

            scrollbar-shadow-color: #999; /*滚动条阴影颜色*/

        }


        .oapage {

            margin-top: -100px;

        }


        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

        #HdhCmsTable_tableData::-webkit-scrollbar {

            width: 16px;

            height: 16px;

            background-color: #F5F5F5;

        }


        /*定义滚动条轨道 内阴影+圆角*/

        #HdhCmsTable_tableData::-webkit-scrollbar-track {

            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

            border-radius: 10px;

            background-color: #F6FAFD;

        }


        /*定义滑块 内阴影+圆角*/

        #HdhCmsTable_tableData::-webkit-scrollbar-thumb {

            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

            border-radius: 10px;

            background-color: #c1c1c1;

        }


            #HdhCmsTable_tableData::-webkit-scrollbar-thumb:hover {

                background: rgba(168, 168, 168);

            }


            #HdhCmsTable_tableData::-webkit-scrollbar-thumb:target {

                background: rgba(255, 232, 183, 0.7);

            }






        .table_color {

            background-color: #E6F7FF;

        }

    </style>

    <script type="text/javascript">

        function FixTable(TableID, FixColumnNumber, width, height) {

            if ($("#" + TableID + "_tableLayout").length != 0) {

                $("#" + TableID + "_tableLayout").before($("#" + TableID));

                $("#" + TableID + "_tableLayout").empty();

                $("#" + TableID + "_tableLayout").css({ "height": +height + "px" });

            }

            else {

                $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px;'></div>");

            }

            $('<div id="' + TableID + '_tableFix"></div>'

                    + '<div id="' + TableID + '_tableFix2"></div>'

                + '<div id="' + TableID + '_tableHead"></div>'

                + '<div id="' + TableID + '_tableColumn"></div>'

                + '<div id="' + TableID + '_tableColumn2"></div>'

                + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");

            var oldtable = $("#" + TableID);

            var tableFixClone = oldtable.clone(true);

            tableFixClone.attr("id", TableID + "_tableFixClone");

            $("#" + TableID + "_tableFix").append(tableFixClone);


            var tableFix2Clone = oldtable.clone(true);

            tableFix2Clone.attr("id", TableID + "_tableFix2Clone");

            $("#" + TableID + "_tableFix2").append(tableFix2Clone);


            var tableHeadClone = oldtable.clone(true);

            tableHeadClone.attr("id", TableID + "_tableHeadClone");

            $("#" + TableID + "_tableHead").append(tableHeadClone);

            var tableColumnClone = oldtable.clone(true);

            tableColumnClone.attr("id", TableID + "_tableColumnClone");

            $("#" + TableID + "_tableColumn").append(tableColumnClone);


            var tableColumn2Clone = oldtable.clone(true);

            tableColumn2Clone.attr("id", TableID + "_tableColumn2Clone");

            $("#" + TableID + "_tableColumn2").append(tableColumn2Clone);


            $("#" + TableID + "_tableData").append(oldtable);

            $("#" + TableID + "_tableLayout table").each(function () {

                $(this).css("margin", "0");

            });

            var HeadHeight = $("#" + TableID + "_tableHead thead").height();

            HeadHeight += 2;

            $("#" + TableID + "_tableHead").css("height", HeadHeight);

            $("#" + TableID + "_tableFix").css("height", HeadHeight);

            var ColumnsWidth = 0;

            var ColumnsNumber = 0;

            var ColumnsWidth2 = 0;

            var ColumnsNumber2 = 0;

            $("#" + TableID + "_tableColumn tr td:lt(" + FixColumnNumber + ")").each(function () {


                ColumnsWidth += $(this).outerWidth(true);

                ColumnsNumber++;


            });

            $("#" + TableID + "_tableColumn tr td:lt(1)").each(function () {


                ColumnsWidth2 += $(this).outerWidth(true);

                ColumnsNumber2++;


            });




            ColumnsWidth += 2;

            if ($.browser.msie) {

                switch ($.browser.version) {

                    case "7.0":

                        if (ColumnsNumber >= 3) ColumnsWidth--;

                        break;

                    case "8.0":

                        if (ColumnsNumber >= 2) ColumnsWidth--;

                        break;

                }

            }

            $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);

            $("#" + TableID + "_tableColumn2").css("width", ColumnsWidth2);


            $("#" + TableID + "_tableFix").css("width", ColumnsWidth);

            $("#" + TableID + "_tableFix2").css("width", ColumnsWidth);

            $("#" + TableID + "_tableData").scroll(function () {

                $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());

                $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());

                $("#" + TableID + "_tableColumn2").scrollTop($("#" + TableID + "_tableData").scrollTop());

            });


            $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "#F6FAFD" });

            $("#" + TableID + "_tableFix2").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "#F6FAFD", "float": "right", "left": "0", "width": "136.5px", "height": "48.5px" });

            $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "#F6FAFD" });

            $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "#F6FAFD" });

            $("#" + TableID + "_tableColumn2").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "#F6FAFD", "float": "right", "width": "121px" });

            $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width - 17, "height": height + 5, "position": "relative", "z-index": "35" });

            if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {

                $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());

                $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);

            }


            if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix2 table").width()) {

                $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix2 table").width());

                $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix2 table").width() + 17);

            }

            if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {

                $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());

                $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);

            }


            if ($("#" + TableID + "_tableColumn2").height() > $("#" + TableID + "_tableColumn2 table").height()) {

                $("#" + TableID + "_tableColumn2").css("height", $("#" + TableID + "_tableColumn2 table").height());

                $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn2 table").height() + 17);

            }


            $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());

            $("#" + TableID + "_tableFix2").offset($("#" + TableID + "_tableLayout").offset());

            $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());

            $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());

            $("#" + TableID + "_tableColumn2").offset($("#" + TableID + "_tableLayout").offset());

            $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

            $("#HdhCmsTable_tableFix2>table>thead>tr>th").last().css("display", "block");

            $("#HdhCmsTable_tableColumn2>table>tbody>tr>td").css("display", "none");

            //$("#HdhCmsTable_tableColumn2>table>tbody>tr").children("td").css("display", "table-cell");


            $("#HdhCmsTable_tableColumn2>table>tbody>tr").each(function () {

                $(this).find("td").last().css("display", "table-cell");

            })


        }



        $(document).ready(function () {

            var width1 = document.body.offsetWidth;

            var height1 = document.documentElement.clientHeight - 0;

            window.onresize = function () {

                width1 = document.body.offsetWidth;

                height1 = document.documentElement.clientHeight - 0;

                FixTable("HdhCmsTable", 2, width1, height1);

            }

            FixTable("HdhCmsTable", 2, width1, height1);

            $("#HdhCmsWkj").attr("style", "width:" + width1 + "px;height:" + height1 + "px;overflow:hidden;");

            $("tbody>tr").hover(function () {

                var index = $(this).index();

                $("table>tbody").find("tr:eq('" + index + "')").addClass("table_color");

            },

    function () {

        var index = $(this).index();

        $("table>tbody").find("tr:eq('" + index + "')").removeClass("table_color");

    })


        });


    </script>

</body>

</html>


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮