jQuery自定义拖拽表格宽度代码



49 195 66



特效描述:jQuery 自定义拖拽 表格宽度代码,jQuery自定义拖拽表格宽度代码

代码结构

1. 引入JS

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

2. HTML代码

<div class="lanrenzhijia" >
<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td>
	</tr>
	<tr>
		<td class="left bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom right">表格内容</td>
	</tr>																	
</table>
	<div class="sampleText">
		<label id="sample2Txt">Drag the columns to start</label>
	</div>
</div>	
<script>
$(function(){	
	var onSampleResized = function(e){
		var columns = $(e.currentTarget).find("th");
		var msg = "columns widths: ";
		columns.each(function(){ msg += $(this).width() + "px; "; })
		$("#sample2Txt").html(msg);		
	};	
	$("#sample2").colResizable({
		liveDrag:true, 
		gripInnerHtml:"<div class='grip'></div>", 
		draggingClass:"dragging", 
		onResize:onSampleResized
	});
});	
</script>
<!-- 代码部分end -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 滑动星星打分 其他 图片拖动 图片拖拽 table表格 表格插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到