js 表格排序(编辑+拖拽+缩放)

2020-02-28 04:12:21

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .cc{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} #tab td.red{border-color:#f30;} .ww{height:100%;width:1px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .line{ width:2px; background-color:#999999; position:absolute; display:none} </style> </head> <body> <table id="tab" border="0" cellspacing="1" cellpadding="0"> <thead> <tr> <td width="60"class="tc" >ID</td> <td width="60"class="tc">选中</td> <td width="100" class="tc">姓名</td> <td width="100" class="tc" >生日</td> <td width="180" class="tc" >备注</td> </tr> </thead>  <tr> <td height="16">1</td> <td><input type ="checkbox"></td> <td>张三</td> <td>1982-05-27</td> <td>杯具,全是杯具</td> </tr> <tr> <td>3</td> <td><input type ="checkbox"></td> <td>李四</td> <td>1983-06-27</td> <td>恩恩我魔兽技术不错</td> </tr> <tr> <td>2</td> <td><input type ="checkbox"></td> <td>王五</td> <td>1983-05-27</td> <td>波斯王子 时之刃还不错</td> </tr> <tr> <td>4</td> <td><input type ="checkbox"></td> <td>赵六</td> <td>1983-05-27</td> <td>我叫赵六</td> </tr> <tr> <td>5</td> <td><input type ="checkbox"></td> <td>朱八</td> <td>1986-05-27</td> <td>洗洗睡吧</td> </tr>  </table> <script language="javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([/d.]+)/)?true:false; s.Firefox = ua.match(/firefox//([/d.]+)/)?true:false; s.Chrome = ua.match(/chrome//([/d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); function $(Id){ return document.getElementById(Id); }; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }; var Css = function(e,o){ if(typeof o=="string") { e.style.cssText=o; return; } for(var i in o) e.style[i] = o[i]; }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); }; }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; }; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Table = new Class({ initialize : function(tab,set){ this.table = tab; this.thead = tab.getElementsByTagName('thead')[0]; //常用的dom元素做成索引 this.theadtds = this.thead.getElementsByTagName('td'); // this.rows = []; //里面tbodys记录所有tr的引用 这里用数组记录是因为数组有reverse方法,可以用来正序,反序 this.clos = {}; //里面记录所有列元素的引用 this.edits = {}; //编辑表格的规则和提示 this.sortCol = null; //记录哪列正在排序中 this.inputtd = null; //记录哪个input被编辑了 this.closarg ={ tdnum : null, totdnum : null, closmove : BindAsEventListener(this,this.closmove), closup : BindAsEventListener(this,this.closup) };//关于列拖拽的一些属性方法 this.widtharg ={ td : null, nexttd : null, x : 0, tdwidth : 0, nexttdwidth : 0, widthmove : BindAsEventListener(this,this.widthmove), widthup : BindAsEventListener(this,this.widthup) }; var i=0,j=0,d=document,rows =tab.tBodies[0].rows,tds1 = tab.tBodies[0].getElementsByTagName('td'),edit=[]; var divs = this.thead.getElementsByTagName('div'); this.input = d.createElement('input'); //编辑用的input this.input.type = "text"; this.input.className = 'edit'; this.img = d.body.appendChild(d.createElement('div')); this.img.className ="cc" ; this.line = d.body.appendChild(d.createElement('div')); this.line.className = 'line'; this.line.style.top = tab.offsetTop +"px"; if(Sys.IE6){ this.checkbox = {}; //记录那些checkbox被选中了 处理ie6不兼容的问题 var checkboxs = tab.getElementsByTagName('input'),k =0; for(var lll=checkboxs.length;k            </SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2020/02-29/549523.html'>jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2020/02-29/549525.html'>Jquery升级新版本后选择器的语法问题</a></div>
<br>
<script src=/d/js/acmsd/wen21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流