javascript - 在 AJAX 调用上具有固定标题的 HTML 表格

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 中并删除正文部分，然后再从原始表格中删除标题部分，所以我现在实际上有两个表格。

然后我创建的 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();