首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

报表宽度的自由拖动

2012-09-10 
表格宽度的自由拖动html中表格table中,每列宽度自动拖动的实现方法1、引入两个js文件:jquery.js和colResiza

表格宽度的自由拖动
html中表格table中,每列宽度自动拖动的实现方法
1、引入两个js文件:jquery.js和colResizable-1.3.min.js,具体见附件

<script  src="jquery.js"></script><script  src="colResizable-1.3.min.js"></script>


2、编写如下一段js代码,其中sample2为表格ID
<script type="text/javascript">$(function(){var onSampleResized = function(e){var columns = $(e.currentTarget).find("th");};$("#sample2").colResizable({liveDrag:true, gripInnerHtml:"<div class='grip'></div>", draggingClass:"dragging", onResize:onSampleResized});});</script>


3、编写表格,注意其ID值sample2和js中保持一致
 <table id="sample2" width="100%" border="1" cellpadding="0" cellspacing="0"><tr><th>header</th><th>header</th><th>header</th></tr><tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr><tr><td class="left">cell</td><td>cell</td><td class="right">cell</td></tr><tr><td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td></tr></table>

热点排行