下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML> <HTML> <head> <Meta charset="gbk"> <Title>table</Title></head> <body> <table ID="tb_1" cellspacing="0" cellpadding="2" wIDth="100%" border="1"> <tbody> <tr bgcolor="#a9a9a9"> <td rowspan="2" align="center">校区</td> <td rowspan="2" align="center">合作供应商</td> <td colspan="5">收入</td> <td colspan="5">收款</td> </tr> <tr bgcolor="#a9a9a9"> <td>下单金额</td> <td>折扣折让</td> <td>成交金额</td> <td>退货金额</td> <td>净收入</td> <td>现金</td> <td>支付宝</td> <td>微信</td> <td>余额</td> <td>总收款</td> </tr></tbody> </table><script type="text/JavaScript"> var tTD; //用来存储当前更改宽度的table Cell,避免快速移动鼠标的问题 var table = document.getElementsByTagname("table")[0]; //var table = document.getElementByID("tb_1"); for (j = 0; j < table.rows[0].cells.length; j++) { table.rows[0].cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWIDth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.olDWIDth = tTD.offsetWIDth; } //记录table宽度 //table = tTD; while (table.tagname != ‘table') table = table.parentElement; //tTD.tableWIDth = table.offsetWIDth; }; table.rows[0].cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; table.rows[0].cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWIDth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.olDWIDth + (event.x - tTD.oldX)>0) tTD.wIDth = tTD.olDWIDth + (event.x - tTD.oldX); //调整列宽 tTD.style.wIDth = tTD.wIDth; tTD.style.cursor = 'col-resize'; //调整该列中的每个Cell table = tTD; while (table.tagname != 'table') table = table.parentElement; for (j = 0; j < table.rows.length; j++) { table.rows[j].cells[tTD.cellindex].wIDth = tTD.wIDth; } //调整整个表 //table.wIDth = tTD.tableWIDth + (tTD.offsetWIDth – tTD.olDWIDth); //table.style.wIDth = table.wIDth; } }; }</script> </body> </HTML>
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的table的第一行实现拖拽全部内容,希望文章能够帮你解决table的第一行实现拖拽所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)