zoukankan      html  css  js  c++  java
  • 相当有用的Table Row And Col Fix方法。

    JQuery.FixedTable

    jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML table. The idea is from https://www.open2space.com/projects/fixedtable. We have improved it, and fixed some bugs.

    Feature

    • Allow horizontal and vertical scroll.
    • Support multiple HTML tables in one page.
    • The number of fixed columns can be customize.
    • The background colors of each row when mouse is over and out can be customized.

    Files

    Nova DownloadDemo , Download: Source Code

    Usage

    To make a fixed table, you need to some javascript code and a <table> with the <thead> and <tfoot> in your page, and set the elements' class.

    e.g.

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.fixedtable.js"></script>
        <script type="text/javascript">
        // this "tableDiv" must be the table's class
        $(".tableDiv").each(function() {      
            var Id = $(this).get(0).id;
            var maintbheight = 555;
            var maintbwidth = 911;
    
            $("#" + Id + " .FixedTables").fixedTable({
                width: maintbwidth,
                height: maintbheight,
                fixedColumns: 1,
                // header style
                classHeader: "fixedHead",
                // footer style        
                classFooter: "fixedFoot",
                // fixed column on the left        
                classColumn: "fixedColumn",
                // the width of fixed column on the left      
                fixedColumnWidth: 150,
                // table's parent div's id           
                outerId: Id,
                // tds' in content area default background color                     
                Contentbackcolor: "#FFFFFF",
                // tds' in content area background color while hover.     
                Contenthovercolor: "#99CCFF", 
                // tds' in fixed column default background color   
                fixedColumnbackcolor:"#187BAF", 
                // tds' in fixed column background color while hover. 
                fixedColumnhovercolor:"#99CCFF"  
            });        
        });
        </script>
        
        <div id="tableDiv_Arrays" class="tableDiv">
            <table id="Open_Text_Arrays" class="FixedTables">
                <thead>
                    <tr>
                        <th>
                            Purpose
                        </th>
                        <th>
                            C#
                        </th>
                        <th>
                            Php4
                        <th>
                        <th>
                            Php5
                        </th>
                        <th>
                            ActionScript
                        </th>
                        <th>
                            JavaScript
                        </th>
                        <th>
                            Ruby
                        </th>
                    </tr>
                <thead>
                <tbody>
                    <tr>
                        <th>
                            data1
                        </th>
                        <th>
                            data2
                        </th>
                        <th>
                            data3
                        <th>
                        <th>
                            data4
                        </th>
                        <th>
                            data5
                        </th>
                        <th>
                            data6
                        </th>
                        <th>
                            data7
                        </th>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th>
                            Purpose
                        </th>
                        <th>
                            C#
                        </th>
                        <th>
                            Php4
                        <th>
                        <th>
                            Php5
                        </th>
                        <th>
                            ActionScript
                        </th>
                        <th>
                            JavaScript
                        </th>
                        <th>
                            Ruby
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
        

    note: if you do not need the footer, just remove the <tfoot> in your html code.

  • 相关阅读:
    为何url地址不是直接发送到服务器,而是被编码后再发送
    http请求分析
    Nginx+Php不支持并发,导致curl请求卡死(Window环境)
    Vue开发调试神器 vue-devtools
    什么是闭包?闭包的优缺点?
    Nginx 504 Gateway Time-out分析及解决方法
    HTTP请求8种方法
    MySQL查询缓存总结
    MySQL单表多次查询和多表联合查询,哪个效率高?
    分布式系统一致性问题解决实战
  • 原文地址:https://www.cnblogs.com/QDuck/p/2318584.html
Copyright © 2011-2022 走看看