javascript实现表格排序编辑拖拽缩放

时间:2020-05-13 人气:1

简单表格排序

可以双击编辑自定义编辑后的规则

可拖动列进行列替换

可推动边框进行列宽度的缩放

<!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>
</head>
<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(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:}
#tab tbody td{overflow:hidden;word-break:break-all;}
#tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; }
#tab td.tc{text-align:center;}
.div{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;}
.line{ width:2px; background-color:#999999; position:absolute; display:none}
.dr{height:100%;width:2px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize}
.r{float:right;}
.l{float:left;}
#tab thead td.thover{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif);background-repeat:repeat-x;}
</style>
<body >
<table id="tab" border="0" cellspacing="1" cellpadding="0">
<thead>
   <tr>
       <td width="80"class="tc" ><span class="l">ID</span><div class="r dr"></div></td>
       <td width="80"class="tc"><span class="l">选中</span><div class="r dr"></div></td>
       <td width="130" class="tc"><span class="l">姓名</span><div class="r dr"></div></td>
       <td width="130" class="tc" ><span class="l">生日</span><div class="r dr"></div></td>
       <td width="220" class="tc" ><span class="l">备注</span><div class="r dr"></div></td>
   </tr>
</thead>
<tbody>
<tr>
    <td height="16">1</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>小三</td>
    <td>1982-05-27</td>
    <td>杯具,全是杯具</td>
</tr>
<tr>
    <td>3</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>李四</td>
    <td>1983-06-27</td>
    <td>恩恩我魔兽技术不错</td>
</tr>
<tr>
    <td>2</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>王五</td>
    <td>1987-05-27</td>
    <td>波斯王子时之刃还不错</td>
</tr>
<tr>
    <td>4</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>赵六</td>
    <td>1988-05-27</td>
    <td>我叫赵六</td>
</tr>
<tr>
    <td>5</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>朱八</td>
    <td>1984-05-27</td>
    <td>洗洗睡吧</td>
</tr>
<tr>
    <td>6</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>阿斯多夫</td>
    <td>1984-06-27</td>
    <td>阿斯多夫暗室逢灯</td>
</tr>
<tr>
    <td>7</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>杯具</td>
    <td>1984-06-27</td>
    <td>很多的杯具</td>
</tr>
<tr>
    <td>8</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>餐具</td>
    <td>1984-02-27</td>
    <td>很多的餐具</td>
</tr>
<tr>
    <td>8</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>洗具</td>
    <td>1984-08-27</td>
    <td>很多的洗具</td>
</tr>
<tr>
    <td>9</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>内牛满面</td>
    <td>1984-12-27</td>
    <td>10快一晚</td>
</tr>
<tr>
    <td>10</td>
    <td><input type ="checkbox"><input name="ss" type="radio" /></td>
    <td>犀利哥</td>
    <td>1984-12-21</td>
    <td>嘿嘿</td>
</tr>
</tbody>
</table>
<script language="javascript">
(function(window,undefined){
window.Sys = function (ua){
    var b = {
        ie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;
    return b;
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

var slice = Array.prototype.slice;
window.Bind = function(object, fun) {
    var args = slice.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(object, fun,args) {
    var args = slice.call(arguments).slice(2);
    return function(event) {
        return fun.apply(object, [event || window.event].concat(args));
    }
};
//copy from jQ
window.Extend = function(){
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
if ( typeof target === "boolean" ) {
  deep = target;
  target = arguments[1] || {};
  i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
  target = {};
for(;i<length;i++){
  if ( (options = arguments[ i ]) != null )
   for(var name in options){
    var src = target[ name ], copy = options[ name ];
    if ( target === copy )
     continue;
    if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
     target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
    }
    else if(copy !== undefined)
     target[ name ] = copy;
   }
}
return target;
};
window.objPos = function(o){
var x = 0, y = 0;
do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
return {'x':x,'y':y};
}
window.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;
};
window.hasClass = function(element, className){
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
} ;
window.addClass = function(element, className) {
!this.hasClass(element, className)&&(element.className += " "+className);
}
window.removeClass = function(element, className) {
hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' '));
}
})(window);

已知BUG：

ie6下中文不自动换行

非ie下字母和数字也不自动换行确实让人恼火

chrome浏览器下点击运行好像问题很大拿到本地测试会比较好

加载全部内容

javascript实现表格排序 编辑 拖拽 缩放

javascript实现表格排序编辑拖拽缩放