因为项目的需要，花了大概一个月的时间完成了一个对table编辑、拖拽、复制、粘贴、剪贴、删除、清空的功能

主要使用的是Jquery ui和jquery.contextmenu，使用了Jquery UI中的Drag功能和jquery.contextmenu的右键菜单功能，功能简介，如果是复杂的table的话可能就不适应了，对于数据量多的table加载也很慢。首先来预览功能

 

 

页面调用方法：

1、首先引用所需的js文件

    

     <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
         <script src="js/CoordTable/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
         <script src="js/CoordTable/js/jquery.contextmenu.r2.js" type="text/javascript"></script>
         <script src="js/CoordTable/js/coordTable.js" type="text/javascript"></script>
         <script src="js/tableEditer.js" type="text/javascript"></script>

2、页面代码

    

            1 $(document).ready(function () {
       2 
       3             var complate = function () {
       4                 $('#coordTable tr:gt(0) td:nth-child(1)').each(function (i, item) {
       5                     $(this).text(i + 1);
       6                 });
       7             }
       8 
       9             //创建行
      10             var createRow = function () {
      11                 var tr = $('<tr class="data"><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
      12                 return tr;
      13             }
      14 
      15             //剪贴后触发的方法
      16             var cuted = function () {
      17                 if ($('#coordTable tr').length <= 1) {
      18                     var tr = createRow();
      19                     $('#coordTable').append(tr);
      20                 }
      21                 complate();
      22             }
      23 
      24             //主调函数
      25             setTimeout(function () {
      26                 $('#coordTable').coordTable({
      27                     selecte_col_len: 4, //坐标每行的列数
      28                     selector_row: 'tr.data td:nth-child(1)', //一个jquery选择器，表示可以点击选择行的区域
      29                     selector_td: 'tr.data td:nth-child(n+2)', //一个jquery选择器，表示可以用鼠标拖拽的区域
      30                     appended: complate,
      31                     inserted: complate,
      32                     deleted: cuted,
      33                     cleared: cuted,
      34                     pasted: complate,
      35                     cuted: cuted,
      36                     create_row: createRow,
      37                     enableCopy: true,
      38                     enablePaste: true,
      39                     enableCut: true,
      40                     enableAppend: true,
      41                     enableInsert: true,
      42                     enableDelete: true,
      43                     enableEdit: true
      44                 });
      45 
      46                 $('#coordTable').tableEditer({
      47                     selector: 'tr.data td:nth-child(n+2)',
      48                     updated: function (td, txt) {
      49                         $('#coordTable').coordTable.floatOnTable();
      50                     }
      51                 });
      52 
      53             }, 500);
      54            
      55         });    

 

DEMO下载地址

DEMO演示地址