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.

  • 相关阅读:
    2017年寒假作业(二)
    2017年寒假作业(一)
    JAVA类型转换
    两数之和(LeetCode)
    编程汇总
    赌神(赛码网基础算法题)
    个人作业——软件工程实践总结
    个人作业——软件产品案例分析
    交换队伍交接过程及个人心得
    软件工程结对作业第二次
  • 原文地址:https://www.cnblogs.com/QDuck/p/2318584.html
Copyright © 2011-2022 走看看