关键词：
其实这些功能在PL/SQL Dev中都有实现，在页面中还是蛮常见的。
我实现列的单向固定的原理：将需要单向固定的列放在一个<table>标签中，而整体的数据放在另一个<table>标签中。
列的拖拽：使用onstartdrag、ondragover、drop事件
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>table拖拽与行列固定</title> 5 <script src="jquery1.11.3.js"></script> 6 <style> 7 #big_div { 8 position: absolute; 9 background: white; 10 WIDTH: 700px; 11 height: 500px; 12 overflow-y: auto; 13 overflow-x: scroll; 14 border: black 1px solid; 15 z-index: 1; 16 } 17 18 #table_total { 19 WIDTH: 900px; 20 } 21 22 #div_head_cloumn { 23 position: absolute; 24 z-index: 100; 25 background: yellow; 26 border-top: 1px solid black; 27 border-left: 1px solid black; 28 border-right: 0px solid black; 29 border-bottom: 0px solid black; 30 } 31 32 #div_head { 33 position: absolute; 34 z-index: 10; 35 background: #C0C0C0; 36 border-top: 1px solid black; 37 border-left: 1px solid black; 38 border-right: 0px solid black; 39 border-bottom: 0px solid black; 40 overflow: hidden; 41 } 42 43 #table_head { 44 position: absolute; 45 width: 900px; 46 } 47 48 #div_column { 49 position: absolute; 50 z-index: 50; 51 background1: white; 52 background: #93DB70; 53 border-top: 1px solid black; 54 border-left: 1px solid black; 55 border-right: 0px solid black; 56 border-bottom: 0px solid black; 57 overflow: hidden; 58 border-left: 1px solid black; 59 border-right: 0px solid black; 60 border-bottom: 0px solid black; 61 border-right: 0px solid black; 62 border-bottom: 0px solid black; 63 border-bottom: 0px solid black; 64 } 65 66 #Vscrollable { 67 position: absolute; 68 } 69 </style> 70 </head> 71 <body> 72 <div id="div_head_cloumn"> 73 <table id="table_head_cloumn"> 74 <tr> 75 <th id="th_head_cloumn" class="fixed">FX_ID</th> 76 </tr> 77 </table> 78 </div> 79 80 <div id="div_head"> 81 <table id="table_head"> 82 <tr id="tr_table_head"> 83 <th id="head_th1" class="index_1">FX_ID</th> 84 <th id="head_th2" class="index_2">FX_MC</th> 85 <th id="head_th3" class="index_3">FX_DM</th> 86 <th id="head_th4" class="index_4">NSRSBM</th> 87 <th id="head_th5" class="index_5">NSR_MC</th> 88 </tr> 89 </table> 90 </div> 91 92 <div id="div_column"> 93 <table id="Vscrollable"> 94 <tr> 95 <th>FX_ID</th> 96 </tr> 97 <tr> 98 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 99 </tr> 100 <tr> 101 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 102 </tr> 103 <tr> 104 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 105 </tr> 106 <tr> 107 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 108 </tr> 109 <tr> 110 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 111 </tr> 112 <tr> 113 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 114 </tr> 115 <tr> 116 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 117 </tr> 118 <tr> 119 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 120 </tr> 121 <tr> 122 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 123 </tr> 124 <tr> 125 <td>5160DFE2DE97BF89E053065B0C8D785F</td> 126 </tr> 127 </table> 128 </div> 129 <div>ssss</div> 130 <div id="big_div" onscroll="onscroll_function()"> 131 <table id="table_total"> 132 133 <tr id="tr_th" class="transform"> 134 <th id="th1" class="index_1">FX_ID</th> 135 <th id="th2" class="index_2">FX_MC</th> 136 <th id="th3" class="index_3">FX_DM</th> 137 <th id="th4" class="index_4">NSRSBM</th> 138 <th id="th5" class="index_5">NSR_MC</th> 139 </tr> 140 141 <tr id="tr_td_1" class="transform"> 142 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 143 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 144 <td class="index_3">320010ZB00001139</td> 145 <td class="index_4">91320104MA1MMKK006</td> 146 <td class="index_5">南京月凌舞文化艺术培训中心</td> 147 </tr> 148 <tr id="tr_td_2" class="transform"> 149 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 150 <td class="index_2">（省局第三方）个人独资</td> 151 <td class="index_3">320010ZB00001139</td> 152 <td class="index_4">913201147568649920</td> 153 <td class="index_5">南京中太</td> 154 </tr> 155 <tr id="tr_td_3" class="transform"> 156 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 157 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 158 <td class="index_3">320010ZB00001139</td> 159 <td class="index_4">320103738870483</td> 160 <td class="index_5">南京中宁制冷空调技术服务中心</td> 161 </tr> 162 <tr id="tr_td_4" class="transform"> 163 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 164 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 165 <td class="index_3">320010ZB00001139</td> 166 <td class="index_4">91320104MA1MMKK006</td> 167 <td class="index_5">南京月凌舞文化艺术培训中心</td> 168 </tr> 169 <tr id="tr_td_5" class="transform"> 170 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 171 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 172 <td class="index_3">320010ZB00001139</td> 173 <td class="index_4">91320104MA1MMKK006</td> 174 <td class="index_5">南京月凌舞文化艺术培训中心</td> 175 </tr> 176 <tr id="tr_td_6" class="transform"> 177 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 178 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 179 <td class="index_3">320010ZB00001139</td> 180 <td class="index_4">91320104MA1MMKK006</td> 181 <td class="index_5">南京月凌舞文化艺术培训中心</td> 182 </tr> 183 <tr id="tr_td_7" class="transform"> 184 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 185 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 186 <td class="index_3">320010ZB00001139</td> 187 <td class="index_4">91320104MA1MMKK006</td> 188 <td class="index_5">南京月凌舞文化艺术培训中心</td> 189 </tr> 190 <tr id="tr_td_8" class="transform"> 191 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 192 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 193 <td class="index_3">320010ZB00001139</td> 194 <td class="index_4">91320104MA1MMKK006</td> 195 <td class="index_5">南京月凌舞文化艺术培训中心</td> 196 </tr> 197 <tr id="tr_td_9" class="transform"> 198 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 199 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 200 <td class="index_3">320010ZB00001139</td> 201 <td class="index_4">91320104MA1MMKK006</td> 202 <td class="index_5">南京月凌舞文化艺术培训中心</td> 203 </tr> 204 <tr id="tr_td_10" class="transform"> 205 <td class="index_1">5160DFE2DE97BF89E053065B0C8D785F</td> 206 <td class="index_2">（省局第三方）个人独资、合伙企业个人所得税汇缴年报表收入总额小于国税财务报表营业收入风险指标</td> 207 <td class="index_3">320010ZB00001139</td> 208 <td class="index_4">91320104MA1MMKK006</td> 209 <td class="index_5">南京月凌舞文化艺术培训中心</td> 210 </tr> 211 </table> 212 </div> 213 214 <p id="demo"></p> 215 <script> 216 //alert(getScrollBarWidth()); 217 /*设置head_cloumn的位置和大小，jquery中css()方法设置样式*/ 218 $("#div_head_cloumn").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left); 219 $("#div_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top); 220 $("#div_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left); 221 $("#table_head_cloumn").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2);//table 与div间隔1 absoulte属性会是div大小随内容被撑开 222 $("#table_head_cloumn").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2);//thead+1,tr+1,th+1 223 224 /*设置head的位置和大小 并设置其中每个th的大小*/ 225 $("#div_head").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left); 226 $("#div_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top); 227 $("#div_head").css("width",700-getScrollBarWidth());//没有特殊设置的话滚动条宽度固定为16px 228 //$("#table_head").css("height",$("#tr_th").height()+$("#tr_th").offset().top-$("#big_div").offset().top-2); 229 //$("#table_head").css("width",$("#tr_th").width()+684);//thead+1,tr+1,th+1 230 $("#table_head th").each(function(index1, element1) {//利用each循环（jquery中的方法）将各个th的宽度设置好 231 $("#big_div th").each(function(index2, element2) { 232 if($(element2).attr("id")==("th"+(index1+1))){//jquery中attr()方法设置属性 233 $(element1).css("width",$(element2).css("width")); 234 return false; 235 } 236 }); 237 }); 238 239 /*设置cloumn的位置和大小 并设置其中每个tr的大小*/ 240 $("#div_column").css("top",$("#big_div").offset().top).css("left",$("#big_div").offset().left); 241 $("#div_column").css("height",$("#big_div").height()-getScrollBarWidth()); 242 $("#div_column").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left); 243 $("#Vscrollable").css("height",$("#table_total").height()); 244 $("#Vscrollable").css("width",$("#th1").width()+$("#th1").offset().left-$("#big_div").offset().left-2); 245 $("#Vscrollable tr:first").css("height",$("#tr_th").css("height")); 246 $("#Vscrollable tr").each(function(index1, element1) {//同样利用each将各个tr的高度设置好 247 if(index1==0){ 248 return true; 249 } 250 $("#big_div tr").each(function(index2, element2) { 251 if($(element2).attr("id")==("tr_td_"+index1)){ 252 $(element1).css("height",$(element2).css("height")); 253 return false; 254 } 255 }); 256 }); 257 //$("#Vscrollable tr").css("height",$("#tr_td_1").css("height")); 258 //$("#Vscrollable tr:first").css("height",$("#tr_th").css("height")); 259 260 261 /*单向固定的方法，逻辑：实时传递大div的滚动条位置给小div的滚动条(小div的滚动条是隐藏的)*/ 262 function onscroll_function() { 263 document.getElementById("table_head").style.left = document 264 .getElementById("big_div").scrollLeft 265 * -1 + ‘px‘; 266 document.getElementById("Vscrollable").style.top = document 267 .getElementById("big_div").scrollTop 268 * -1 + ‘px‘; 269 } 270 271 272 /*----------------------------------------------------------------*/ 273 274 //获得滚动条宽的 275 function getScrollBarWidth() { 276 var inner = document.createElement(‘p‘); 277 inner.style.width = "100%"; 278 inner.style.height = "200px"; 279 280 var outer = document.createElement(‘div‘); 281 outer.style.position = "absolute"; 282 outer.style.top = "0px"; 283 outer.style.left = "0px"; 284 outer.style.visibility = "hidden"; 285 outer.style.width = "200px"; 286 outer.style.height = "150px"; 287 outer.style.overflow = "hidden"; 288 outer.appendChild (inner); 289 290 document.body.appendChild (outer); 291 var w1 = inner.offsetWidth; 292 outer.style.overflow = ‘scroll‘; 293 var w2 = inner.offsetWidth; 294 if (w1 == w2) w2 = outer.clientWidth; 295 296 document.body.removeChild (outer); 297 298 return (w1 - w2); 299 } 300 301 var _target;//拖拽的元素//声明变量 302 var _droptarget;//触发drop事件的元素 303 var end_X = 0;//drop时鼠标位置 304 var end_Y = 0; 305 var e_left = 0;//触发drop事件的元素的位置(绝对) 306 var e_width = 0;//触发drop事件的元素的宽度 307 var ifFixed = false;//是否被固定 308 var first_cell = $("#head_th1");//第一个单元格 309 var first_cell_class = $(first_cell).attr("class");//第一个单元格的class 310 $("th").attr("draggable",true);//attr设置属性css设置样式 311 var width_balance = $("#th1").offset().left-$("#big_div").offset().left;//宽度差额 312 313 //设置鼠标在id为"sortable1"的元素上时的样式为"move" 314 document.getElementById("tr_th").style.cursor = "move"; 315 document.getElementById("div_head_cloumn").style.cursor = "move"; 316 document.getElementById("div_head").style.cursor = "move"; 317 318 319 //jquery绑定方法，当p发生dragstart事件时触发此方法 320 $(‘th‘).on(‘dragstart‘,function(e){ 321 _target = e.target; 322 //如果拖拽的元素是固定的列，就把固定列下面的活动的列赋值给_target 323 if($(e.target).attr("class")=="fixed"){ 324 ifFixed = true; 325 _target = first_cell; 326 } 327 }); 328 329 330 //jquery绑定方法，当p发生dragover事件时触发此方法 331 $(‘th‘).on(‘dragover‘,function(e){ 332 e.preventDefault();//该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作) 333 }); 334 335 //jquery绑定方法，当p发生drop事件时触发此方法 336 $(‘th‘).on(‘drop‘,function(e){ 337 event.preventDefault(); 338 _droptarget = event.srcElement;//获得事件的源对象 339 if($(_droptarget).attr("class")=="fixed"){ 340 ifFixed = true; 341 _droptarget = first_cell; 342 } 343 end_X = event.pageX; 344 end_Y = event.pageY; 345 e_left = $(_droptarget).offset().left; 346 e_width = $(_droptarget).width(); 347 348 if ($(_droptarget).attr("draggable") == "true") {//draggable属性，为true时可拖拽，false时不可拖拽 349 if (end_X<(e_left+e_width/2)) 350 $(_droptarget).before($(_target));//before方法 语法$(selector).before(content);将content添加到选定的元素之前 351 if (end_X>=(e_left+e_width/2)) 352 $(_droptarget).after($(_target));//after()方法 353 } 354 355 var arrayObj_th = new Array();//创建一个数组 356 357 $("#tr_table_head>th").each(function() {//each遍历 358 arrayObj_th.push($(this));//push数组的添加元素操作 359 }); 360 361 //alert($("#tr_td_1 td").size()); 362 $(".transform").each(function(index1, element1) { 363 var arrayObj_td = new Array(); 364 var arrayObj_td_temp = new Array(); 365 // alert(index1); 366 for(var i=1;i<=arrayObj_th.length;i++){ 367 arrayObj_td_temp.push($(this).children(".index_"+i)); 368 } 369 370 $.each(arrayObj_th, function (index, item) { 371 $.each(arrayObj_td_temp, function (index2, item2) {//index2:下标、item2:元素(Object) 372 //attr获取/设置元素的属性值 373 if(item.attr("class")==item2.attr("class")){//元素.attr("class")获取该元素的class值 374 arrayObj_td.push(item2);} 375 }); 376 }); 377 378 for(var i=arrayObj_td.length-1;i>=0;i--){ 379 arrayObj_td[i].before(arrayObj_td[i-1]); 380 } 381 }); 382 if(ifFixed==true){//如果拖拽的元素是固定的列，改变固定列的大小、文本内容 383 ifFixed=false; 384 first_cell = arrayObj_th[0]; 385 first_cell_class = $(first_cell).attr("class"); 386 $("#div_head_cloumn").css("width",$(first_cell).width()+width_balance); 387 $("#table_head_cloumn").css("width",$(first_cell).width()+width_balance-2);//thead+1,tr+1,th+1 388 $("#th_head_cloumn").text($(first_cell).text()); 389 390 $("#div_column").css("width",$(first_cell).width()+width_balance); 391 $("#Vscrollable").css("width",$(first_cell).width()+width_balance-2); 392 //$("#Vscrollable tr").css("height",$("#tr_td_1").css("height")); 393 //$("#Vscrollable tr:first").css("height",$("#tr_th").css("height")); 394 395 $("#table_total ."+first_cell_class).each(function(index, element) { 396 if($(element).attr("class")==first_cell_class){ 397 $("#Vscrollable th,td").eq(index).text($(element).text()); 398 } 399 }); 400 } 401 }); 402 </script> 403 </body> 404 </html>
jquery实现对div的拖拽功能
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情
jq实现登陆页面的拖拽功能
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery-1.9.1.min.js"type="text/javascript"charset="utf-8"></script> <title></title> 查看详情
element的table使用sortable.js进行拖拽的时候，禁止某些列的拖拽功能
...able不具备拖拽排序的功能，所以有时候会用到Sortable.js去实现拖拽的功能。具体的使用方法可以参考以下https://blog.csdn.net/weixin_34301307/article/details/87527853但是有时候我们只想特定的列能够进行拖拽，特别是在有input输入框的时候... 查看详情
具有多个固定行和列的 HTML 表格
】具有多个固定行和列的HTML表格【英文标题】：HTMLtablewithmultiplefixedrowsandcolumns【发布时间】：2019-04-0423:45:16【问题描述】：我有一张这样的桌子：现在，实际上，将有超过100行和/或列。自然，在这样的表格中，有人可能会忘记... 查看详情
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序html代码：<ulondrop="drop_handler(event);"ondragover="dragover_handler(event);"><lidraggable="true"ondragstart="dragstart_handler(event);">1</li><lidraggable="tr 查看详情
实现元素简单的拖拽
1.通过元素的offsetLeft，offsettop实现元素的拖拽1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title></title>7<styletype="text/css">8.box{9width:100px;10height:100px 查看详情
js实现登陆页面的拖拽功能
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <styletype="text/css"> *{ margin:0; padding:0; } a{ text-d 查看详情
通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽
...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情
js实现鼠标的拖拽效果
拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的，我直接拿过来了，地址http://www.imooc.com/le... 查看详情
javascript实现最简单的拖拽效果
一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情
javascript实现网页元素的拖拽效果
以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。实现该效果的HTML页面代码例如以下所看到的：<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><styletype="text/css">#xixi{wid 查看详情
cookie结合js实现记住的拖拽
哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个cookie结合JS的小案例哦!话不多说直接上代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> #drag{ width:200px; 查看详情
qt中如何实现一个treewidget的拖拽功能
QTreeWidget中有一个分级别的树，只允许同级别之间的拖拽功能，那位会做帮帮小弟吧参考技术AsetDragDropMode(QAbstractItemView::InternalMove) 查看详情
jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法我先不对监听事件做解释，我们先来看下jquery的一些写法吧！我们最常用的是jquery的css()方法，相信大家都会用！假如用css设置一个属性，我们写法如下：$("#haorooms").css("width","100px");假如多个... 查看详情
html具有固定行和列的表(代码片段)
玩玩flutter的拖拽——实现一款万能遥控器(代码片段)
...然想到两年前写过的一篇博客：玩玩Android的拖拽——实现一款万能遥控器，就想着用Flutter来复刻一下。顺便练习一下Flutter里的拖拽Widget。先给大家看看最终的实现效果以及与Android版的对比（个人觉得还原度很高ÿ... 查看详情
textarea的拖拽怎么解决
textarea文本域在页面中是可以拖动的，即时你给了固定的宽度和高度，但这在我们页面布局中，使我们不需要的，因为可拖拽很多时候会影响我们页面的布局和整体的美观度。css3提供了一个resize属性，可以帮助我们解决这个问题... 查看详情
jquery实现表格冻结行和列
前几天，遇到一个需求是要将表格的前几行和前几列冻结即固定，就是在有滚动条的情况下，保持那几行和那几列固定，这个需求其实是一个非常常见的需求，因为在涉及好多行和列时，在拖动滚动条时，我们需要知道每行... 查看详情