JQuery implements mouse dragging to adjust the width of table columns

Drag the mouse to adjust the width of the table column as shown in the figure:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140526093847.jpeg? 201442693933 ">  
I. introduction document:

 
<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="/js/store.js" type="text/javascript"></script> 
<script src="/js/jquery.resizableColumns.js" type="text/javascript"></script> 

Second, the TABLE

 
<table id="myTable" border="1"> 
<thead> 
<tr> 
<th data-resizable-column-id="a"><input type="checkbox" /></th> 
<th data-resizable-column-id="b"> The column type  </th> 
<th data-resizable-column-id="c"> The name of the event  </th> 
<th data-resizable-column-id="d"> state  </th> 
<th data-resizable-column-id="e"> Operating options </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input type="checkbox" /></td> 
<td> The youth journal </td> 
<td>2014 The annual youth diary essay  </td> 
<td> submit  </td> 
<td> audit </td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td> The story of me and my children growing up </td> 
<td> Growth story  </td> 
<td> through  </td> 
<td> audit </td> 
</tr> 
</tbody> 
</table> 

The above HTML is only used as a Demo and is not actually used in my project, and it was not implemented during testing. Depressed...

Three, the realization of the table can be dragged

 
<script type="text/javascript"> 
$(function(){ 
$("#myTable").resizableColumns({ 
store: window.store 
}); 
}) 
</script> 

Found no need to introduce store. Js < Th> The data-resizable-column-id attribute is also not required

And $(" # myTable "). ResizableColumns (); Also can realize the function

The required file download address: (link: http://xiazai.jb51.net/201405/yuanma/jquery-resizableColumns.zip)

Unzip the two files separately

Jquery. ResizableColumns. Js in \ jquery - the resizable columns - gh - pages \ dist directory

Store.js is under the path store.js-master