jQuery实现表格宽度自动拖拽

1、新建html文档。

2、书写hmtl代码。

<div class="a" >

<table id="sample2

<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>

3、书写css代码。

<style>

*{ margin:0; padding:0;}

body{font-size:14px; padding:50px;}

.a{text-align:left;}

.a th{  background-image:url('images/th.png');  height:30px;  background-repeat:no-repeat;  color:white;  text-shadow: #012b4d 2px 2px 2px;  text-align: center; }

.a td{text-indent:5px; padding:5px;color:#444;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}

.a td.left{border-left:1px solid #2e638e;}

.a td.right{border-right:1px solid #2e638e;}

.a td.bottom{border-bottom:1px solid #2e638e;}

.grip{width:20px;height:30px;margin-top:-3px;background-image:url('images/grip.png');margin-left:-5px;position:relative;z-index:88;cursor:e-resize;}

.grip:hover{background-position-x:-20px;}

.dragging .grip{background-position-x:-40px;}

.sampleText{position:relative;width:100%;}

.dotted{background-image:url('images/dotted.png');background-repeat:repeat-y;}

input.check{}

#sample2Txt{float:right;}

label{color:#0361ae;}

#sample2 th:nth-child(2){color:Red !important;display:none;}

#sample2 td:nth-child(2){color:Red !important;display:none;}

#sample2 th:nth-child(3){color:Red !important;display:none;}

#sample2 td:nth-child(3){color:Red !important;display:none;}

</style>

4、书写并添加js代码。

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

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

<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>

5、代码整体结构。

6、查看效果。