这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
用 js 实现表格的拖拽效果代码
- <html>
- <title>phperz 表拖拽效果代码</title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <style type="text/css">
- .mainDiv{padding:1px;overflow:auto;scrollbar-face-color:#DEEAF8;height:auto;width:expression(document.body.clientWidth); }
- .fixedHeaderTr{height:24px;background:#D0E2FD;color:#000;text-align:center;}
- .fixedHeaderTd{height:24px;line-height:22px}
- .relativeTag{height:20px;background-color:#fff;}
- .relativeTag1{height:20px;background-color:#F5F6F8;}
- .relativetd{border:1px solid #f1f1f1;border-width:0 0 1px 0;padding:0 15px 0 5px;text-align:center;}
- .resizeDivClass{text-align:right;width:3px;margin:1px 0 1px 0;background:#eee;float:right;cursor:e-resize;}
- </style>
- <script>
- function MouseDownToResize(obj){
- setTableLayoutToFixed();
- obj.mouseDownX=event.clientX;
- obj.pareneTdW=obj.parentElement.offsetWidth;
- obj.pareneTableW=theObjTable.offsetWidth;
- obj.setCapture();
- }
- function MouseMoveToResize(obj){
- if(!obj.mouseDownX) return false;
- var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
- if(newWidth>0)
- {
- obj.parentElement.style.width = newWidth;
- theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
- }
- }
- function MouseUpToResize(obj){
- obj.releaseCapture();
- obj.mouseDownX=0;
- }
- function setTableLayoutToFixed()
- {
- if(theObjTable.style.tableLayout=='fixed') return;
- var headerTr=theObjTable.rows[0];
- for(var i=0;i<headerTr.cells.length;i++)
- {
- headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
- }
- for(var i=0;i<headerTr.cells.length;i++)
- {
- headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
- }
- theObjTable.style.tableLayout='fixed';
- }
- </script>
- <body style="BORDER-top: #769ABE 1px solid;">
- <div>
- <table width="100%" cellspacing=0 style="margin:0;" id=theObjTable >
- <tr class="fixedHeaderTr">
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 选择
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 订单号
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 公司名称
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 订单客户
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 部门
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 业务员
- </td>
- <td class="fixedHeaderTd">
- <img class="img-responsive" src="images/box1.gif" width="3" height="18" data-src="">
- 交款方式
- </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox0.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox0.checked!=true){this.style.background ='#F5F6F8';}">
- <td class="relativetd">
- <input name="checkbox0" type="checkbox" id="checkbox0"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox1.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox1.checked!=true){this.style.background ='#ffffff';}">
- <td class="relativetd">
- <input name="checkbox1" type="checkbox" id="checkbox1"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox2.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox2.checked!=true){this.style.background ='#F5F6F8';}">
- <td class="relativetd">
- <input name="checkbox2" type="checkbox" id="checkbox2"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox3.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox3.checked!=true){this.style.background ='#ffffff';}">
- <td class="relativetd">
- <input name="checkbox3" type="checkbox" id="checkbox3"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox4.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox4.checked!=true){this.style.background ='#F5F6F8';}">
- <td class="relativetd">
- <input name="checkbox4" type="checkbox" id="checkbox4"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox5.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox5.checked!=true){this.style.background ='#ffffff';}">
- <td class="relativetd">
- <input name="checkbox5" type="checkbox" id="checkbox5"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="if(checkbox6.checked!=true){this.style.background ='#EBF2FF';}" onmouseout="if(checkbox6.checked!=true){this.style.background ='#F5F6F8';}">
- <td class="relativetd">
- <input name="checkbox6" type="checkbox" id="checkbox6"
- onclick="this.checked==true?this.parentNode.parentNode.style.background='#D0E2FD':this.parentNode.parentNode.style.background=''">
- </td>
- <td class="relativetd">1000000</td>
- <td class="relativetd">中国电信</td>
- <td class="relativetd">订单客户名称</td>
- <td class="relativetd">广告部</td>
- <td class="relativetd">王天一</td>
- <td class="relativetd">现金</td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#ffffff';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#F5F6F8';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#ffffff';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#F5F6F8';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#ffffff';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#F5F6F8';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#ffffff';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#F5F6F8';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#ffffff';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- <tr class="relativeTag1" onmousedown="this.style.background ='#D0E2FD';" onmouseover="this.style.background ='#EBF2FF';" onmouseout="this.style.background ='#F5F6F8';">
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- <td class="relativetd"> </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0704/288231.html