我使用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>
答案 0 :(得分:0)
我有一段时间没有同样的问题,最后写了我自己的小功能来做这件事。
基本上我首先正常构建表,然后我在新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();