js簡單的表拖拽

2019-11-21 01:44:58

字體：大中小

供稿：網(wǎng)友

<html> <title>武林網(wǎng) 表拖拽效果代碼</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   id="iwvjtn8m0"   class="mainDiv" id=mailContainerDiv>     <table width="100%" cellspacing=0  style="margin:0;" id=theObjTable >         <TR class="fixedHeaderTr">             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              選擇             </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              訂單號              </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              公司名稱              </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              訂單客戶             </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              部門              </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              業(yè)務員             </TD>             <TD class="fixedHeaderTd">             <span id="iwvjtn8m0"    class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"><img src="https://www.jb51.netimages/box1.gif" width="3" height="18"></span>              交款方式             </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">現(xiàn)金</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">現(xiàn)金</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">現(xiàn)金</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">現(xiàn)金</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">現(xiàn)金</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">現(xiàn)金</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">現(xiàn)金</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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：Js的MessageBox效果代碼

下一篇：js下拉框里超過變成省略號