首頁 > 開發者 > JavaScript
上兩天寫了一個關於表格頭可以拖動：JS-Demo1：JavaScript實現表格列拖動
這次在拖動的效果上，實現表格頭凍結等。：
代碼比較長，感興趣的朋友，不妨複製看看
代碼：
<!DOCTYPE html><html> <head> <title>表格凍結</title><style type="text/css">table{color: #000;font: normal 12px 宋體,tahoma,arial,verdana,sans-serif;table-layout:fixed;}#theadTable,#tfootTable tr{background-color: #CBDDF3;border: 1px solid #7BBDFF;}td,th{white-space: nowrap;overflow:hidden; }td{line-height: 16px;}.dragable{ width: 3px; height:100%; cursor: col-resize; /*下面3個樣式與效果有一定關係,其他無所謂*/ float: right; position: relative; right: 0px; }</style><!-- <script type="text/javascript" src="/jxc/js/jQuery/jquery-1.7.2.js"></script> --><script type="text/javascript">/***************************************************************************//** * 為了方便看效果,寫了個jQuery的簡單實現,實際應用中,可以去掉這個，而引用jquery.js，無影響。 */function jQuery(expression){expression = expression.substring(1);this[0] = document.getElementById(expression);this.val = function(v){if(v!=undefined) this[0].value = v;else return this[0].value;}return this;}window.$ = jQuery;/***************************************************************************/var draging = false;//是否拖拽中var dragElement = null;//當前拖拽的thvar offsetLeft = 0;//當前拖拽的th與絕對左座標var verticalLine = undefined;//豎線var draggedWidth = 0;//拖拽時th的寬度，當滑鼠mouseup時，th的寬度為該值function mousedown(){if(draging) return;draging = true;dragElement = window.event.srcElement.parentNode;dragElement.theadtd = theadTable.rows(0).cells(dragElement.cellIndex);dragElement.tfoottd = tfootTable.rows(0).cells(dragElement.cellIndex);dragElement.tbodytd = {style:{}};//當表格中沒有資料時,賦值這麼一個對象,不引起js報錯。if(tbodyTable.rows.length>0)//當表格中有資料時dragElement.tbodytd = tbodyTable.rows(0).cells(dragElement.cellIndex);offsetLeft = dragElement.offsetLeft;document.body.style.cursor = "col-resize";document.body.onselectstart = function(){return false;};//拖拽的時候，滑鼠滑過字的時候，不讓選中(預設滑鼠選中字的效果,大家都知道)if(verticalLine==undefined){verticalLine = createVerticalLine();}}function mouseup(){if(!draging) return;draging = false;document.body.style.cursor = "auto";document.body.onselectstart = function(){return true};verticalLine.style.display = "none";dragElement.style.width = draggedWidth;dragElement.theadtd.style.width = draggedWidth;dragElement.tbodytd.style.width = draggedWidth;dragElement.tfoottd.style.width = draggedWidth;dragElement = null;}function mousemove(){if(draging && dragElement){if(event.clientX-offsetLeft>0){draggedWidth = event.clientX-offsetLeft; verticalLine.style.left = event.clientX+8; verticalLine.style.display = "block";}}} //建立觸發拖動表格列的span：<span class="dragable" onmousedown="mousedown();"> </span>function createSpan(){var span = document.createElement("span");span.className = "dragable";span.attachEvent("onmousedown",mousedown);span.innerHTML = " ";return span;} //建立拖動時的效果(豎線):<div style="z-index: 10; position: absolute; background-color: #c3c3c3; width: 6px; display: none; height: ?px; top: 24px; left: 608px"></div>function createVerticalLine(){var div = document.createElement("div");div.style.position = "absolute";div.style.display = "none";div.style.backgroundColor = "#C3C3C3";div.style.width = "6px";div.style.height = tbodyDiv.style.height;div.style.top = tbodyTable.offsetTop;div.style.zIndex = "10";div.innerHTML = " ";document.body.appendChild(div);return div;}var mainDiv;var theadDiv,tbodyDiv,tfootDiv;var theadTable,tbodyTable,tfootTable; window.onload = function(){mainDiv = $("#mainDiv")[0];theadDiv = $("#theadDiv")[0];tbodyDiv = $("#tbodyDiv")[0];tfootDiv = $("#tfootDiv")[0];theadTable = $("#theadTable")[0];tbodyTable = $("#tbodyTable")[0];tfootTable = $("#tfootTable")[0];/* dragable 效果 *///在theadTable中的th內容中添加spanvar theadThs = theadTable.getElementsByTagName("th");for(var i=0;i<theadThs.length;i++)theadThs[i].appendChild(createSpan());theadTable.style.width = tbodyTable.style.width = tfootTable.style.width = Math.max(theadTable.offsetWidth,tbodyTable.offsetWidth,tfootTable.offsetWidth);var ths = theadTable.rows(0).getElementsByTagName("th");var tfs = tfootTable.rows(0).getElementsByTagName("td");var tds;//當表格中沒有資料時,賦值這麼一個對象,不引起js報錯。if(tbodyTable.rows.length>0){tds = tbodyTable.rows(0).getElementsByTagName("td");}else{tds = new Array();for(var i=0;i<ths.length;i++){tds[tds.length] = {style:{},offsetWidth:0};}}if(ths.length!=tds.length && tds.length!=tfs.length){alert("長度不一致");}for(var i=0;i<ths.length;i++){var width;if(ths[i].style.width) width = ths[i].style.width;else if(ths[i].width) width = ths[i].width;else width = Math.max(ths[i].offsetWidth,tds[i].offsetWidth,tfs[i].offsetWidth);if(i!=ths.length-1)ths[i].style.width = tds[i].style.width = tfs[i].style.width = width;}} /** * 當tfootdiv橫向滾動時,theadDiv與tbodyDiv同時滾動。 * @param tfootDiv */function togetherScroll(scrollingDiv){theadDiv.scrollLeft = scrollingDiv.scrollLeft;tbodyDiv.scrollLeft = scrollingDiv.scrollLeft;tfootDiv.scrollLeft = scrollingDiv.scrollLeft;}</script></head><body onmousemove="mousemove();" onmouseup="mouseup();"><span style="font-weight: bold;font-size: 14px;">JavaScript版TableGrid說明:<br>1、暫時不支援表格跨行跨列<br>2、暫時不支援表格凍結列<br></span><div id="mainDiv" style="height: 500px;width: 100%;"><div id="theadDiv" style="width:100%;height:16px;overflow-y:scroll;overflow-x:hidden;"><table id="theadTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;"><thead><tr><th style="width: 120px;">網站名稱</th><th style="width: 300px;">網站地址</th><th width="50px;">使用者名稱</th><th width="50px;">密碼</th><th width="180px;">郵箱</th><th>手機號碼</th><th>備忘</th><th>操作</th></tr></thead></table></div><div id="tbodyDiv" style="width:100%;height:444px;overflow-y:scroll;overflow-x:hidden;background-color: #FAFAFA;" onscroll="togetherScroll(this)"><table id="tbodyTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:100%;border-style: solid;"><tbody id="content"><!-- <tr><td>Siuon's CSDN Blog</td><td><a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a></td><td>Siuon</td><td>123456</td><td>xiaochunyong@gmail.com</td><td>1862152####</td><td>...</td><td><a href="javascript:alert('修改');">修改</a> <a href="javascript:alert('刪除');">刪除</a></td></tr> --></tbody></table></div><div id="tfootDiv" style="width:100%;height:40px;overflow-y:scroll;overflow-x:scroll;" onscroll="togetherScroll(this)"><table id="tfootTable" border="1" cellpadding="0" cellspacing="0" style="width:100%;height:16px;border-style: solid;"><tfoot><tr><td> </td><td> </td><td> </td><td style="text-align: right;">第一頁 上一頁</td><td style="text-align: center;align:justify"><input type="text" style="width: auto;"><button type="button">Go</button></td><td style="text-align: left;">下一頁 最後一頁</td><td> </td><td>1 - 30 共 30 條</td></tr></tfoot></table></div></div><script type="text/javascript">//動態產生30行資料,可以把如下代碼刪除，以便測試無資料時無誤。var content = $("#content")[0];for(var i=0;i<30;i++){var row = content.insertRow();row.insertCell().innerHTML = 'Siuon\'s CSDN Blog';row.insertCell().innerHTML = '<a href="http://blog.csdn.net/xiaochunyong" target="_blank">http://blog.csdn.net/xiaochunyong</a>';row.insertCell().innerHTML = 'Siuon';row.insertCell().innerHTML = '123456';row.insertCell().innerHTML = 'xiaochunyong@gmail.com';row.insertCell().innerHTML = '1862152####';row.insertCell().innerHTML = '...';row.insertCell().innerHTML = '<a href="javascript:alert(\'修改\');">修改</a> <a href="javascript:alert(\'刪除\');">刪除</a>';}</script> </body></html>
該TableGrid 暫時不支援：
1、暫時不支援表格跨行跨列
2、暫時不支援表格凍結列
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
