Table drag (compatible with Firefox 3.5/ie6), Fixed table width
<ptml> <title>table Drag (compatible with Firefox 3.5/ie6), fixed table width </title> <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "> <style type=" text/css "><!--. bg {font-size:12px; Color: #000000; table-layout:fixed;//This property can hide text}. bg td{font-size:12px; Color: #000000; Text-align:left; line-height:15px; height:20px; }. BG td.tit{background-color: #e2e2e2; Color: #000; height:17px; Text-align:center; line-height:15px; }. BG td.num{background-color: #e2e2e2; Color: #000; Text-align:right; line-height:15px; height:22px; width:30px; }. resizedivclass{Text-align:right; width:3px; margin:0px 0 0px 0; Background: #fff; border:0px; Float:right; Cursor:e-resize; }--></style> <script type= "Text/javascript" ><!--window.onload=function () {Drag ( document.getElementById (' drag ')); Drag (document.getElementById (' Drag2 ')); Drag (document.getElementById (' drag3 ')); Drag (document.getElementById (' Drag4 ')); }; functionDrag (o,r) {o.p_p_c_gw=function (index)/* Gets the o.parentnode.parentnode.cells width, compatible with IE6 and firefox*/{if (window. ActiveXObject) {return o.parentnode.parentnode.cells[o.parentnode.cellindex+index].offsetwidth; }else{return parseint (o.parentnode.parentnode.cells[o.parentnode.cellindex+index].offsetwidth)-ParseInt ( o.parentnode.parentnode.parentnode.parentnode.cellpadding) *2-2; } o.p_p_p_sw=function (INDEX,W) * Sets the index cell of all rows to W, and can only set the first row */{for IE (var i=0;i< o.parentnode.parentnode.parentnode.parentnode.rows.length;i++) { O.parentnode.parentnode.parentnode.parentnode.rows[i].cells[index].style.width=w; } var Out=document.getelementbyid (' my '); O.firstchild.onmousedown=function () {return false;}; O.onmousedown=function (a) {var d=document;if (!a) a=window.event; var Lastx=a.clientx; var watch_dog=o.p_p_c_gw (0) +O.P_P_C_GW (1);/sometimes drag-and-drop too fast the table will become larger, as for why it is so I do not know. Watch_dog is to ensure that the form does not become larger, if (o.setcapture) o.setcapture (); else if (window.captureevents) window.captureevents (event.mousemove| EveNt. MOUSEUP); D.onmousemove=function (a) {if (!a) a=window.event; if (O.P_P_C_GW (0) +O.P_P_C_GW (1) >watch_dog) {o.p_p_p_sw (O.PARENTNODE.CELLINDEX+1,WATCH_DOG-O.P_P_C_GW (0)); Return } var t=a.clientx-lastx;out.innerhtml=t; if (t>0) {//right if (parseint (o.parentnode.parentnode.cells[o.parentnode.cellindex+1].style.width)-t<10) Return O.P_P_P_SW (O.PARENTNODE.CELLINDEX,O.P_P_C_GW (0) +t); O.P_P_P_SW (O.PARENTNODE.CELLINDEX+1,O.P_P_C_GW (1)-T); else {//left if (parseint (o.parentnode.parentnode.cells[o.parentnode.cellindex].style.width) +t<10) return; O.P_P_P_SW (O.PARENTNODE.CELLINDEX,O.P_P_C_GW (0) +t); O.P_P_P_SW (O.PARENTNODE.CELLINDEX+1,O.P_P_C_GW (1)-T); } Lastx=a.clientx; }; D.onmouseup=function () {if (o.releasecapture) o.releasecapture (); else if (window.captureevents) window.captureevents (event.mousemove| Event.mouseup); D.onmousemove=null; D.onmouseup=null; }; }; }//--></script> <body > <table class= "bg" width= "60%" border= "1" cellspacing= "0" cellpadding= "0" bordercolorlight= "#7b7b7b" bordercolordark= "#efefef" id= "theobjtable" > <tr > <TD class= num > Serial </td> <td class= > <span class= resizedivclass id= drag ></span > Company name </td> <td class= > <span class= resizedivclass id= Drag2 ></span> Order customer </ td> <td class= > <span class= resizedivclass id= drag3 ></span> Department </td> <TD Clas s= > <span class= resizedivclass id= Drag4 ></span> salesman </td> <td class= > Donor Type </td> </tr> <tr > <td class= "num" >1</td> <td> <div > Cloud-Habitat Community </div>< /TD> <td ><div >jb51.net</div></td> <td > Advertising Department </td> <td > Wang Tian Kai one </td> td > Cash </td> </tr > </table> <div id= "My" ></div> <div id= "My2" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The above code is I collect from the Internet, not I write, hereby declare.
The following attached two is IE only, we can refer to the next.
<ptml> <title> Drag column width table </title> <meta http-equiv= "Content-type" content= text/html; charset=gb2312 "> <style type=" text/css "><!--. BG td{font-size:12px; Text-align:left; line-height:15px; height:20px; }. BG td.tit{background-color: #e2e2e2; height:17px; Text-align:center; line-height:15px; }. BG td.num{background-color: #e2e2e2; Text-align:right; line-height:15px; width:30px; height:22px; }. resizedivclass{Text-align:right; width:1px; margin:0px 0 0px 0; Background: #fff; border:0px; Float:right; Cursor:e-resize; }--></style> <script language= "javascript" ><!--function mousedowntoresize (obj) {settablelayout ToFixed (); 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>10) {var theobjtable = document.getElementById ("theobjtable"); Obj.parentElement.style.width = Newwidth; Theobjtable.style.width=obj.parenetdw*1+event.clientx*1-obj.mousedownx; }} function Mouseuptoresize (obj) {obj.releasecapture (); obj.mousedownx=0; function settablelayouttofixed () {var theobjtable = document.getElementById ("theobjtable"); if (theobjtable.style.tablelayout== ' fixed ') return; var headertr=theobjtable.rows[0]; for (Var i=0;i<peadertr.cells.length;i++) {headertr.cells[i].styleoffsetwidth=headertr.cells[i].offsetwidth; for (Var i=0;i<peadertr.cells.length;i++) {headertr.cells[i].style.width=headertr.cells[i].styleoffsetwidth; } theobjtable.style.tablelayout= ' fixed '; function Theobjtable (o,a,b,c) {var T=document.getelementbyid (o). getElementsByTagName ("tr"); for (Var i=0;i<t.length;i++) {t[i].style.backgroundcolor= (t[i].sectionrowindex%2==0)? a:b; T[i].onclick=function () {if (this.x!= "1") {}else{this.x= "0"; This.style.backgroundcolor= (this.sectionrowindex%2==0) a:b; } t[i].onmouseover=function () {if (this.x!= "1") this.style.backgroundcolor=c; } t[i].onmouseout=function () {if (this.x!= "1") this.style.backgroundcolor= (this.sectionrowindex%2==0)? A:B; }}//--></script> <body> <table width= "100%" class= "BG" border=1 cellspacing=0 bordercolorl ight= "#7b7b7b" bordercolordark= "#efefef" id= "theobjtable" > <tr> <td class= "num" > Serial number </td> <TD Width= 100px class= > <span class= resizedivclass onmousedown= Mousedowntoresize (this); Onmousemove= Mousemovetoresize (This), "onmouseup=" mouseuptoresize (this); " ></span> Company name </td> <td class= > <span class= resizedivclass onmousedown= MOUsEdowntoresize (This), "onmousemove=" mousemovetoresize (This), "onmouseup=" mouseuptoresize (this); " ></span> Order customers </td> <td class= > <span class= resizedivclass onmousedown= Ize (This), "onmousemove=" mousemovetoresize (This), "onmouseup=" mouseuptoresize (this); " ></span> Department </td> <td class= > <span class= resizedivclass onmousedown= Mousedowntoresiz E (this), "onmousemove=" mousemovetoresize (This), "onmouseup=" mouseuptoresize (this); ></span> salesman </td> <td class= > <span class= resizedivclass onmousedown= Mousedowntoresi Ze (this), "onmousemove=" mousemovetoresize (This), "onmouseup=" mouseuptoresize (this); ></span> Payment Methods </td> </tr> <tr> <td class= "num" >1</td> <TD > China Telecom </td > <TD > Order Customer name </td> <td > Advertising Department </td> <td > Wang Tian Kai one </td> <td > Cash </td> </t r> <tr> <td class= "num" >2</td> <TD > China Mobile </td> <td > order Customer name </td> <td > Marketing Department </td> <td > Li Xiaohong </td> <TD > Credit </td> </tr> <tr> <td class= "num" >3</td> <td > China Unicom </td> <t D > order Customer name </td> <td > Marketing </td> <td > King Second </td> <td > bank card </td> </tr> ;/table> <script language= "javascript" ><!--//senfe ("Table name", "Odd row Background", "even line background", "Mouse over Background", "Post click Background"); Theobjtable ("Theobjtable", "#c0c0c0", "#fff", "#a3a2a2"); --></script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following is achieved through HTC.
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 > <title> can be dragged to change the column width of the table </title> </pead> <body> <div > <table border= 1 cellspacing=0 cellpadding=0 > <TR> <td> title1 cloud-dwelling community </TD> <td>  ;title2jb51.net</td> <TD> title3</TD> <TD> title4</TD> < /tr> <TR> <TD> content11</TD> <TD> content12</TD> <TD> content13</TD> <TD> content14</TD> </TR> <TR> <TD> content21</TD> <TD> content22</TD> <td> content2 3</td> <TD> content24</TD> </TR> <TR> <td> conte Nt31</td> <TD> content32</TD> <TD> content33</TD> <TD> content34</TD> </TR> </TABLE&G T </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Note The above code, you need to download the HTC file
