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


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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(}
#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();background-repeat:repeat-x;}
</style>
<body >
<table  cellspacing="1" cellpadding="0">
 <thead>
   <tr>
       <tdclass="tc" ><span>ID</span><div></div></td>
       <tdclass="tc"><span>选中</span><div></div></td>
       <td ><span>姓名</span><div></div></td>
       <td ><span>生日</span><div></div></td>
       <td ><span>备注</span><div></div></td>
   </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>小三</td>
    <td>1982-05-27</td>
    <td>杯具,全是杯具</td>
  </tr>
  <tr>
    <td>3</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>李四</td>
    <td>1983-06-27</td>
    <td>恩恩我魔兽技术不错</td>   
  </tr>
  <tr>
    <td>2</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>王五</td>
    <td>1987-05-27</td>
    <td>波斯王子 时之刃还不错</td>   
  </tr>
  <tr>
    <td>4</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>赵六</td>
    <td>1988-05-27</td>
    <td>我叫赵六</td>   
  </tr>
  <tr>
    <td>5</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>朱八</td>
    <td>1984-05-27</td>
    <td>洗洗睡吧</td>   
  </tr>
  <tr>
    <td>6</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>阿斯多夫</td>
    <td>1984-06-27</td>
    <td>阿斯多夫暗室逢灯</td>   
  </tr>
  <tr>
    <td>7</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>杯具</td>
    <td>1984-06-27</td>
    <td>很多的杯具</td>   
  </tr>
  <tr>
    <td>8</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>餐具</td>
    <td>1984-02-27</td>
    <td>很多的餐具</td>   
  </tr>
  <tr>
    <td>8</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>洗具</td>
    <td>1984-08-27</td>
    <td>很多的洗具</td>   
  </tr>
  <tr>
    <td>9</td>
    <td><input type ="checkbox"><input type="radio"  /></td>
    <td>内牛满面</td>
    <td>1984-12-27</td>
    <td>10快一晚</td>   
  </tr>
  <tr>
    <td>10</td>
    <td><input type ="checkbox"><input 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);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxdzj.html