在AJAX调用上使用固定标题的HTML表格

Question

我使用AJAX将HTML表格转换为指定的div id（使用溢出滚动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从使用$来切换JQ jQuery的模板系统。

var jq=jQuery.noConflict();