---隐藏table 的tbody部分右侧的部分列(模仿别人代码写的,性能有点低)
<script type="text/javascript"> $(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 = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-x':'auto',height:'15px',width:'0px'}) .append($('<div/>')) .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}'); }); }); </script>
二、发现一个问题,不为何?
问题描述:当页面顶部有下列代码时,滚动条显示不出来。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三、总结:
加给table加滚动条,其实是
1、在table外,包了div,
2、将table中的多余部分隐藏掉。
3、修改div的滚动条滚动事件。