html表格隐藏并添加滚动条,让table带下滚动条(部分隐藏td的)横向的

让table带上滚动条(部分隐藏td的)横向的

---隐藏table 的tbody部分右侧的部分列(模仿别人代码写的，性能有点低)

$(function(){

var table = $('table.maintable1').each(function(){

var $table = $(this).css('border-collapse','collapse');

var $tbody = $table.find('tbody').eq(0);

// var sbPosition = {left: $tbody.position().left, top: $(this).position().top+$(this).height()};

//alert($(this).position().top+"---"+$(this).height());

var $scrollbar = $('

.append($('

.appendTo($table.parent());

this.onpropertychange = function(){

sbPosition = {left: $tbody.position().left, top: $(this).position().top};

$scrollbar.css({'top':sbPosition.top-15,'left':sbPosition.left});

};

$table.bind('colnum',function(event, newColNum){

//先设置显示的行

var nFirst = 0;

newColNum =newColNum -2;

$tbody.find('tr').find("td[name!='trHead']").hide();

$tbody.find('tr').each(function(){

$(this).find("td[name!='trHead']").each(function(i){

if( i >= nFirst && i < nFirst + newColNum)

{

$(this).show();

}

else

{

$(this).hide();

}

});

});

var scrollWidth = $tbody.find('tr').first().find("td[name!='trHead']").length*$tbody.width()/newColNum;

var $sb = $scrollbar;

$sb.css('width',$tbody.width());

$sb.find('div').eq(0).css('width',scrollWidth);

});

$scrollbar.scroll(function(){

$sb = $(this);

var nNewIndex = Math.floor($sb.scrollLeft() / $sb.attr('scrollWidth')

* $tbody.find('tr').first().find("td[name!='trHead']").length);

var nIndex = parseInt($tbody.attr('itemIndex') || '0');

var colnum = '${baseColNum}';

colnum = colnum-2;

if(nIndex!=nNewIndex)

{

$tbody.find('tr').each(function(){

$(this).find("td[name!='trHead']").each(function(i){

if(i >= nNewIndex && i < nNewIndex + colnum)

{

$(this).show();

}

else

{

$(this).hide();

}

});

});

$tbody.attr('itemIndex', nNewIndex);

}

});

$table.trigger('colnum','${baseColNum}');

});

});

二、发现一个问题，不为何？

问题描述：当页面顶部有下列代码时，滚动条显示不出来。

三、总结：

加给table加滚动条，其实是

1、在table外，包了div，

2、将table中的多余部分隐藏掉。

3、修改div的滚动条滚动事件。