table的第一行实现拖拽

table的第一行实现拖拽,第1张

概述table的第一行实现拖拽

下面是内存溢出 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的第一行实现拖拽所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1097922.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存