jquery实现的拖动可以调整table单元格大小代码实例

jquery实现的拖动可以调整table单元格大小代码实例:

本章节介绍一下如果利用jquery实现表格单元格可以通过鼠标拖动调整大小的效果,当然如果让我们完全写代码的话,可能会比较的复杂,不过有现成的插件可以使用,只要简单的几个步骤就可以实现我们的要求。

一.引入相关库文件:

要使用相关插件,那就必须要引入相关的代码文件,如下:

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

上面的插件这里就不提供下载了,在网上有很多,自行搜索即可。

二.table表格简单代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
</style> 
</head> 
<body> 
<table id="thetable" class="table"> 
  <thead> 
    <tr> 
      <th data-resizable-column-id="a">蚂蚁部落一</th> 
      <th data-resizable-column-id="b">蚂蚁部落二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
</table> 
</body> 
</html>

以上代码就是我们想要拖动的表格代码。

三.如何使用:

$(function(){ 
  $("#thetable").resizableColumns({ 
    store: window.store 
  }); 
})

使用如上代码就可以实现拖动效果了。

实现此效果非常的简单,只要按部就班的按照上面的方式即可。

原文地址是:jquery实现的拖动可以调整table单元格大小代码实例一章节。

所属网站是javascript教程。

你可能感兴趣的:(jquery实现的拖动可以调整table单元格大小代码实例)