写个鸡儿的代码 2017-08-23 03:13 采纳率: 0%
浏览 997
已结题

一个js table 拖拽的问题！求大佬解答

功能是 table的列可以左右拖拽替换里面的内容，但是 列过多的时候 就会出现横向滚动条，现在的情况时 拖动到最后的时候滚动条并不会跟着走，想达到的结果是 拖拽列到最后的时候 想叫横向滚动条跟着走。 希望大佬解答下！谢谢

  • 写回答

2条回答 默认 最新

  • 写个鸡儿的代码 2017-08-23 03:14
    关注

    这是代码

    <!DOCTYPE html>






    <br> #table-draf {<br> position:fixed;<br> display:none;<br> background:#fff;<br> text-align:center;<br> top:0;<br> background-color:#000;<br> background-color:rgba(0,0,0,0.8);<br> color:#fff;<br> /*height:400px;*/<br> cursor:move;<br> }</p> <p>#table-draf p {<br> line-height: 2<br> }</p> <p>#tabledraf0 {<br> position: relative;<br> top: 0;<br> left: 0;<br> }<br> .table-responsive{</p> <pre><code>min-height: 0.01%; position: relative; overflow-x: auto; </code></pre> <p>}</p> <pre><code>table { width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0 } table th { text-align: left; font-weight: 400 } .table-title { display: block; background: #82c6f9; padding: 11px 0; text-align: center; color: #fff; margin: 0; } .table th { background: #333333; color: #fff; font-weight: bold } .thead-opacity { opacity: .6; } .table th, .table td { text-align: center; padding: 6px 3px; word-break: break-all } .table-rowspan th&gt;div, .table-rowspan td&gt;div { display: inline-block; margin: 0 auto; width: 100%; padding: 2px; } .table-div { border-top: 1px solid #ddd; border-left: 0; border-right: 0; padding: 6px 0 } .table-div:first-child { border: 0 } .table td {} /*.table tbody tr:first-child:hover { background: #288ce2 !important </code></pre> <p>}*/</p> <pre><code>body .table-tongji tbody tr:first-child:hover { background: #fff !important; } .table tbody tr.success&gt;td { background-color: #dff0d8 } .table tbody tr.error&gt;td { background-color: #f2dede } .table tbody tr.warning&gt;td { background-color: #fcf8e3 } .table tbody tr.info&gt;td { background-color: #d9edf7 } .table tbody+tbody { border-top: 2px solid #ddd } .table .table { background-color: #fff } .table-border { border-top: 1px solid #ddd } .table-border th, .table-border td { border-bottom: 1px solid #ddd } .table-bg thead th { background-color: #f5fafe } .table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; border-left: 0 } .table-bordered th, .table-bordered td { border-left: 1px solid #ddd } .table-border.table-bordered { border-bottom: 0 } .table-striped tbody&gt;tr:nth-child(odd)&gt;td { background-color: #f9f9f9 } .table-condensed th, .table-condensed td { padding: 4px 5px } .table-hover tbody tr:hover td { background-color: #f5f5f5 } .table tbody tr.selected td { background-color: #f3f3f3 } .table tbody tr.active, .table tbody tr.active&gt;td, .table tbody tr.active&gt;th, .table tbody tr .active { background-color: #f5f5f5!important } .table tbody tr.success, .table tbody tr.success&gt;td, .table tbody tr.success&gt;th, .table tbody tr .success { background-color: #dff0d8!important } .table tbody tr.warning, .table tbody tr.warning&gt;td, .table tbody tr.warning&gt;th, .table tbody tr .warning { background-color: #fcf8e3!important } .table tbody tr.danger, .table tbody tr.danger&gt;td, .table tbody tr.danger&gt;th, .table tbody tr .danger { background-color: #f2dede!important } .table .text-c th, .table .text-c td { text-align: center } .table .text-r th, .table .text-r td { text-align: right } .table th.text-l, .table td.text-l { text-align: left!important } .table th.text-c, .table td.text-c { text-align: center!important } .table th.text-r, .table td.text-r { text-align: right!important } &lt;/style&gt; </code></pre> <p></head></p> <p><body><br> <div class="wrap" style="overflow: hidden;"><br> <div class="table-responsive"><br> <div id="chenkbox"><br> <table id="tabledraf1" style="width: 3000px;" class="table table-border table-bordered "><br> <tr><br> <th style="width: 20px;"><br> <input type="checkbox" name="selectall" id="" value="" /><br> </th><br> <th>订单号</th><br> <th>订单类型</th><br> <th>货主</th><br> <th>业务员</th><br> <th>发货人</th><br> <th>收货人</th><br> <th>货物名</th><br> <th>出发城市</th><br> <th>到达城市</th><br> <th>操作</th><br> <th>订单状态</th><br> <th>下单时间</th><br> <th>发货时间</th><br> <th>到达时间</th><br> <th>是否回单</th><br> <th>设备是否返回</th><br> <th>订单是否结算</th><br> <th>温度/位置</th><br> <th>订单金额</th><br> <th>异常扣款</th><br> <th>去税收入</th><br> <th>税前支出</th><br> <th>去税支出</th><br> <th>中转费</th><br> <th>仓储费</th><br> <th>去税利润</th><br> <th>税前利润</th><br> </tr><br> <tbody id="tbody"><br> <tr><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> <td>231</td><br> </tr><br> </tbody></p> <pre><code> &lt;/table&gt; &lt;div id=&quot;table-draf&quot;&gt; &lt;div class=&quot;bhead&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></body></p> <p></html></p> <script> Drag('tabledraf1') //拖动 function Drag(table) { var ochek = document.getElementById("chenkbox"), // otable0 = document.getElementById(tableflex), otable = document.getElementById(table), otody = otable.tBodies[0], oth = otody.getElementsByTagName("th"), otd = otody.getElementsByTagName("td"), box = document.getElementById("table-draf"), bhead = document.getElementsByClassName('bhead')[0], wrap = document.getElementsByClassName('wrap')[0], tab = document.getElementsByClassName('table-responsive')[0], lf = 0, oxo = '', oyo = '', arrn = []; var timer = setInterval(function() { lf = tab.scrollLeft console.log(lf) otable.style.left = -lf + 'px'; for (var i = 0; i < oth.length; i++) { oth[i].onmousedown = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth, maxl = ochek.offsetWidth - thW, rows = otable.rows, ckL = ochek.offsetLeft, disX = target.offsetLeft, otop = document.body.scrollTop, oxtop = tab.offsetTop, oin = this.cellIndex, _this = this; oxo = this.innerHTML; for (var i = 0; i < rows.length; i++) { var op = document.createElement("p"); if (rows[i].cells[this.cellIndex]) { op.innerHTML = rows[i].cells[this.cellIndex].innerHTML; } box.appendChild(op); }; for (var i = 0; i < oth.length; i++) { arrn.push(oth[i].offsetLeft); }; //console.log(arrn); box.style.display = "block"; box.style.width = thW + "px"; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onmousemove = function(e) { var e = e || window.event, target = e.target || e.srcElement, thW = target.offsetWidth; box.style.top = 8 + oxtop - otop + "px"; box.style.left = e.clientX - thW / 2 + "px"; document.onselectstart = function() { return false }; window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty(); } document.onmouseup = function(e) { var e = e || window.event, opr = box.getElementsByTagName("p"), oboxl = e.clientX + lf; for (var i = 0; i < arrn.length; i++) { if (arrn[i] < oboxl) { var index = i; } }; // oyo = oth[index].innerHTML; // oth[index].innerHTML = oxo; // oth[oin].innerHTML = oyo; oyo = oth[index].innerHTML; oth[index].innerHTML = oxo; oth[index].innerHTML = oyo; // console.log(index) // for(var i = 0; i < rows.length; i++) { // rows[i].cells[_this.cellIndex].innerHTML = ""; // rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; // rows[i].cells[index].innerHTML = ""; // rows[i].cells[index].innerHTML = opr[i].innerHTML; // }; for (var i = 0; i < rows.length; i++) { if (rows[i].cells[_this.cellIndex]) { rows[i].cells[_this.cellIndex].innerHTML = ""; rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML; }; if (rows[i].cells[index]) { rows[i].cells[index].innerHTML = ""; rows[i].cells[index].innerHTML = opr[i].innerHTML; }; }; box.innerHTML = ""; arrn.splice(0, arrn.length); box.style.display = "none"; document.onmousemove = null; document.onmouseup = null; document.onselectstart = function() { return false }; } } oth[0].onmousedown = function() { return false; } }; }, 10) } </script>
    评论

报告相同问题？

悬赏问题

  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100