jQuery自定義拖拽表格寬度代碼



43 170 57



特效描述: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

加群請備注:從官網了解到

老夫子电子