Question

我使用AJAX将HTML表格转换为指定的div id（使用over flow scroll-css），它工作正常，但我需要滚动div上的固定标题，我提到了我的代码

   <style>
     .wrapper{    
       width:auto;   
       overflow-y:scroll;  
       position:relative;  
       height: 200px;}
</style>

<script type="text/javascript">
    $(document).ready(function() {  
            $('#preloader').hide();         
            $('#preloader')
                    .ajaxStart(function(){
                            $(this).show();
                    }).ajaxStop(function(){
                            $(this).hide();
                    });                                                                                                     
            $('#form form').submit(function(){
                    $('#result').empty();
                    $.get('my_leave_search.php', $(this).serialize(), function(data){                                                  
                            $('#result').html(data);
                    });                     
                    return false;
            });
    });
    </script>



 <div class="mydiv"> 
<div id="form">
<form>
</form>
</div>
<div class="wrapper" id="result">
</div>

Answer 1

我有一段时间没有同样的问题，最后写了我自己的小功能来做这件事。

基本上我首先正常构建表，然后我在新div中克隆表并删除body部分，然后从原始表中删除head部分，所以实际上我现在有两个表。

我创建的div然后固定Y轴上的滚动，所以总是有滚动条。

看看下面，看看这对你有用。您需要将表（作为jquery对象）传递给您想要固定标题，然后传递您想要表的高度。你可能想调整一下，但这对我很有用。

function scrolify(tblAsJQueryObject, height){
    // Make a scrollable table with fixed header
    if(!height) {height=250}
    var oTbl = tblAsJQueryObject;
    oTbl.wrap(jq("<div/>"));                // wrap a div around the table
    var oTblDiv = jq("<div/>");
    oTblDiv.css('height', height);
    oTblDiv.css('overflow-y','scroll');             
    oTblDiv.css('overflow-x','hidden');             
    oTbl.width(oTbl.width()-20)             // remove 20px from width for scrollbars
    oTbl.wrap(oTblDiv);

    // save original width
    oTbl.attr("data-item-original-width", oTbl.width());
    oTbl.find('thead tr td').each(function(){
        jq(this).attr("data-item-original-width",jq(this).width());
    }); 
    oTbl.find('tbody tr:eq(0) td').each(function(){
        jq(this).attr("data-item-original-width",jq(this).width());
    });                 

    // clone the original table
    var newTbl = oTbl.clone();
    oTbl.parent().parent().prepend(newTbl);
    newTbl.wrap("<div/>");

    oTbl.find('thead tr').remove();         // remove table header from original table
    newTbl.find('tbody').remove();      // remove table body from new table
    newTbl.attr('id','')

    // Change coumns widths from parten, only applies to first row
    // of each table :(eq0)
    newTbl.width(newTbl.attr('data-item-original-width'));
    newTbl.find('thead tr td').each(function(){
        jq(this).width(jq(this).attr("data-item-original-width"));
    });     
    oTbl.width(oTbl.attr('data-item-original-width'));      
    oTbl.find('tbody tr:eq(0) td').each(function(){ 
        jq(this).width(jq(this).attr("data-item-original-width"));
    })

    // add in alternate row colours
    oTbl.find('tbody tr:odd').each(function() {
        jq(this).addClass('oddRow')
        }
    )
}

很抱歉，刚编辑了这个，因为我使用了一个使用$的模板系统，我使用jQuery.noConflict将jQuery从使用$转换为jq。

var jq=jQuery.noConflict();

在AJAX调用上具有固定标头的HTML表

1 个答案: