table表格列宽拖动功能

最新推荐文章于 2024-05-17 15:30:32 发布

凡人·没有梦

最新推荐文章于 2024-05-17 15:30:32 发布

阅读量4.9k

点赞数

分类专栏：小技术点文章标签： javascript table

本文链接：https://blog.csdn.net/pleasurehappy/article/details/41351153

版权

小技术点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

table表格设定为固定的宽度、比例之后怎样改变呢请看下文

代码如下：

需要引用 jquery.js、 colResizable-1.3.min.js

<!DOCTYPE html>
<html>
<head>
  <title>demo</title>  
<script  src="jquery.js"></script>
<script  src="colResizable-1.3.min.js"></script>
<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>
  
</head>
<body>
	<div class="center" >
	
		 <br/><br/>
						
		
		
		
	</div>	
		
 <table id="sample2" width="100%" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td>header</td><td>header</td><td>header</td>
	</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>
	
		
 </body>
 </html>