JQuery 可拖曳动态添加表格、动态排序.doc

Author WenTime 2011-05-18这个是模型代码，领会思想就够1、3行2列，可以拖动调整位置2、第1列为名字，超长支持.（用css控制）3、第2列固定宽度，第1列显示剩下的（用css控制）4、第2列提供“上移”、“下移”操作5、第2列提供“删除”操作6、提供“添加行”操作，弹出div输入名字添加行7、提供“修改行”操作，弹出div输入名字修改行文件：movetable.html无标题文档!-/启动加载$(function()/ var obj = a:1;/ var ar = b:1, c:2;/ alert(0);/ alert($.toJSON(obj);/ alert(ar0.b);resert();/拖动排序$(#sortable).sortable(items: tr,/handle: tr,/handle: .portlet-header,/cursor: move,stop: function() resert(););$(#sortable).disableSelection();)/up$(a.up).live(click,function()var onthis = $(this).parent(td).parent(tr);var getup = $(this).parent(td).parent(tr).prev();$(getup).before(onthis);resert();)/down$(a.down).live(click,function()var onthis = $(this).parent(td).parent(tr);var getup = $(this).parent(td).parent(tr).next();$(getup).after(onthis);resert();)/del$(a.del).live(click,function()var onthis = $(this).parent(td).parent(tr);onthis.remove();)/open add$(inputname=addnewTr).live(click,function()$(inputname=name1).attr(value,);$(inputname=name2).attr(value,);$(.box3).hide();$(.box2).show(););$(inputname=nameadd).live(click,function()addNew();$(.box2).hide(););/open updatefunction openupdate(a)/alert(进了了望+a);var value1 = $(#+a+_1).html();var value2 = $(#+a+_2).html();$(inputname=name3).attr(value,value1);$(inputname=name4).attr(value,value2);$(.box2).hide();$(inputname=_update).attr(value,a);$(.box3).show();$(inputname=nameupdate).live(click,function()/alert(进入了1);var c = $(inputname=_update)0.value;/alert(进入了2);updatedate(c);/alert(进入了3);$(.box3).hide(););/function resert()if($(#sortable).find(td.doing).size()=1)/alert(1);$(#sortable).find(td.doing).parent().removeClass(normal).removeClass(last).removeClass(first).addClass(only);if($(#sortable).find(td.doing).size()=2)/alert(2);$(td.doing:eq(0).removeClass(only).removeClass(normal).removeClass(last).addClass(first);$(td.doing:eq(1).removeClass(only).removeClass(normal).removeClass(first).addClass(last);if($(#sortable).find(td.doing).size()=3)/alert(3);$(td.doing:gt(0).removeClass(only).removeClass(first).removeClass(last).addClass(normal);$(td.doing:first).removeClass(only).removeClass(normal).removeClass(last).addClass(first);$(td.doing:last).removeClass(only).removeClass(normal).removeClass(first).addClass(last);var _j = 5;/alert(_j);function addNew()var name1 = $(inputname=name1)0.value;var name2 = $(inputname=name2)0.value;_j=+_j;/alert(_j);/添加新行var sortable = $(#sortable);var firstTr = sortable.find(tbodytr:first);var row = $();var td = $();var td2 = $();var td3 = $();td.text(name1);td2.text(name2);td3.append(删除  修改    );row.append(td);row.append(td2);row.append(td3);sortable.append(row);resert();function update(a)/传进来/alert(a);/alert(进来了);openupdate(a);function updatedate(a)var name3 = $(inputname=name3)0.value;var name4 = $(inputname=name4)0.value;alert(name3);alert(name4);$(#+a+_1).text(name3);$(#+a+_1).text(name3);/alert(value1);/alert(value2);#sortable2 border:1px solid #000; table-layout:fixed; #sortable2 th text-align:left; font-size:14px; font-weight:600; background:#FC9; #sortable2 td border-bottom:1px solid #CCC; .link1 white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; .link2 white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; #pannelList a.arrow cursor:pointer;font-size:13px;height:12px;margin:0;padding:0 3px;text-decoration:none;#pannelList .only .up, #pannelList .only .up_current, #pannelList .first .up, #pannelList .first .up_current background:transparent url(arrow.gif) no-repeat scroll 0 0;#pannelList .only .down, #pannelList .only .down_current, #pannelList .last .down, #pannelList .last .down_current background:transparent url(arrow.gif) no-repeat scroll 0 -18px;#pannelList .last .up, #pannelList .normal .up background:transparent url(arrow.gif) no-repeat scroll 0 -35px;#pannelList .first .down, #pannelList .normal .down background:transparent url(arrow.gif) no-repeat scroll 0 -52px;#pannelList .last .up_current, #pannelList .normal .up_current background:transparent url(arrow.gif) no-repeat scroll 0 -69px;#pannelList .first .down_current, #pannelList .normal .down_current background:transparent url(arrow.gif) no-repeat scroll 0 -86px;.box2 width:200px; height:100px; background:#999; z-index: 100; display:none; .box3 width:200px; height:100px; background:#999; z-index: 100; display:none; 显示名称一显示名称二操作第一行111111111111超出超出超出超出第一行111111111111删除  修改    第