表格列交换，拖拽改变列宽效果
表格可以拖拽更换每列循序，并且可以拖拽修改每列长度jquery插件。使用到了colResizable-1.3.min.js（更改列宽）和colExchange.js（拖拽交换列位置，并且扩展了2个方法removeCol删除列和addCol添加列API方法）这2个插件，效果如下。
表格列交换，拖拽改变列宽示例，查看效果点击这里：表格列交换，拖拽改变列宽示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>表格列交换，拖拽改变列宽示例</title>
<link rel="stylesheet" type="text/css" href="/demo/table-col-resize-exchange/css/main.css" />
<script src="/demo/table-col-resize-exchange/js/jquery.js"></script>
<script src="/demo/table-col-resize-exchange/js/colResizable-1.3.min.js"></script>
<script src="/demo/table-col-resize-exchange/js/colExchange.js"></script>
</head>
<body>
<div class="center" >
<br/><br/>
<table id="tab" width="100%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td title="点击拖动可以交换列的位置">标题一</td>
<td title="点击拖动可以交换列的位置">标题二</td>
<td title="点击拖动可以交换列的位置">标题三</td>
</tr>
</thead>
<tr>
<td class="left">cell1</td>
<td>cell4</td>
<td class="right">cell7</td>
</tr>
<tr>
<td class="left">cell2</td>
<td>cell5</td>
<td class="right">cell8</td>
</tr>
<tr>
<td class="left bottom">cell3</td>
<td class="bottom">cell6</td>
<td class="bottom right">cell9</td>
</tr>
</table>
<input type="button" value="添加一列到最后" onclick="$('#tab').colExhange('addCol',$('#tab')[0].rows[0].cells.length,'标题new')"/>
<input type="button" value="删除最后一列" onclick="$('#tab').colExhange('removeCol', $('#tab')[0].rows[0].cells.length)" />
<br />
<br />
<table id="tab1" width="100%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td title="点击拖动可以交换列的位置">标题一</td>
<td title="点击拖动可以交换列的位置">标题二</td>
<td title="点击拖动可以交换列的位置">标题三</td>
</tr>
</thead>
<tr>
<td class="left">cell1</td>
<td>cell4</td>
<td class="right">cell7</td>
</tr>
<tr>
<td class="left">cell2</td>
<td>cell5</td>
<td class="right">cell8</td>
</tr>
<tr>
<td class="left bottom">cell3</td>
<td class="bottom">cell6</td>
<td class="bottom right">cell9</td>
</tr>
</table>
<input type="button" value="添加一列到最后" onclick="$('#tab1').colExhange('addCol',$('#tab')[0].rows[0].cells.length,'标题new')" />
<input type="button" value="删除最后一列" onclick="$('#tab1').colExhange('removeCol', $('#tab')[0].rows[0].cells.length)" />
</div>
<script type="text/javascript">
$(function () {
$("#tab,#tab1").colResizable({ liveDrag: true, gripInnerHtml: "<div class='grip'></div>", draggingClass: "dragging" }).colExhange();
});
</script>
</body>
</html>
点击下载：表格列交换，拖拽改变列宽
加支付宝好友偷能量挖...
原创文章，转载请注明出处：表格列交换，拖拽改变列宽效果