表格头固定而列可滚动的效果_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:38:20

表格头固定而列可滚动的效果_javascript技巧

表格头固定而列可滚动的效果_javascript技巧:对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看表格头固定而列可滚动的效果-脚本之家 body { font-family: arial, helvetica, sans-serif, ; font-size: 9pt; margin: 0px; sc

推荐度：

点击下载本文 文档为doc格式

导读表格头固定而列可滚动的效果_javascript技巧:对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看表格头固定而列可滚动的效果-脚本之家 body { font-family: arial, helvetica, sans-serif, ; font-size: 9pt; margin: 0px; sc

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看

<html> 
<head> 
<title>表格头固定而列可滚动的效果-脚本之家</title>
</head> 
<style type="text/css"> 
body { 
 font-family: "arial", "helvetica", "sans-serif", ""; 
 font-size: 9pt; 
 margin: 0px; 
 scrollbar-face-color:#efefe7; 
 scrollbar-highlight-color:#ffffff; 
 scrollbar-3dlight-color:#a5a5a5; 
 scrollbar-darkshadow-color:#a5a5a5; 
 scrollbar-shadow-color:#d6d6ce; 
 scrollbar-arrow-color:#003184; 
 scrollbar-track-color:#deded6; 
 } 
table { 
 font-family: "arial", "helvetica", "sans-serif",""; 
 font-size: 9pt; 
 line-height: 150%; 
 color: #000000; 
 } 
.display-tb2 
{ 
 border-right: #808080 1px solid; 
 border-top: #808080 1px solid; 
 border-left: #808080 1px solid; 
 border-bottom: #808080 1px solid; 
 border:0; 
 cellpadding:2; 
 cellspacing:0; 
 margin-top:2px; 
 border-collapse:collapse; 
} 
div.tableContainer 
{ 
 overflow-x:auto; 
 width:760px; 
 dyn-behavior:expression( 
 onscroll == null? 
 (onscroll = function(){ 
 if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return; 
 var oGridBody = document.getElementById("order_GridBody"); 
 oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px"; 
 event.srcElement.oldScroll == event.srcElement.scrollLeft; 
 }):true, 
 onmousedown == null? 
 (onmousedown = function(){ 
 if(self.currentTH != null) return; 
 var obj = document.elementFromPoint(event.x,event.y); 
 var objL = document.elementFromPoint(event.x - 1,event.y);

if(obj.tagName.toLowerCase() == "th") 
 { 
 
 if(objL.tagName.toLowerCase() == "th") 
 { 
 obj = objL; 
 } 
 if(obj.className == "fixed") return; 
 self.currentX = event.x; 
 self.currentTH = obj.childNodes[0]; 
 self.currentTH.setCapture(); 
 } 
 }):true, 
 onmouseup == null? 
 (onmouseup = function(){ 
 if(self.currentTH != null) 
 { 
 self.currentTH.releaseCapture(); 
 self.currentTH = null; 
 } 
 }):true, 
 onmousemove == null? 
 (onmousemove = function(){ 
 if(self.currentTH != null) 
 { 
 var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX); 
 if(width < 0) width = 0; 
 var dt = parseInt(self.currentTH.style.width) - width; 
 self.currentTH.style.width = width; 
 __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width); 
 self.currentX = event.x; 
 } 
 }):true, 
 self.__resizeCell == null? 
 (self.__resizeCell = function(idx, width){ 
 var cells = document.getElementById("order_GridBody_Cells"); 
 var rows = cells.childNodes; 
 var i = 0; 
 for (var i = 0; i < rows.length; i++) 
 { 
 var cell = rows[i].childNodes[idx].childNodes[0]; 
 var resetPattern = /style=[^\s\t\n]+/; 
 cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'"); 
 } 
 }):true 
 ) 
} 
div.bodyContainer 
{ 
 height:250px; 
 width:760px; 
 overflow-x:hidden; 
 overflow-y:auto; 
} 
div.gridCell_standard 
{ 
 width:100px; 
 overflow:hidden; 
 nw:expression(this.noWrap=true); 
 margin-left: 0px; 
 margin-right: 1px; 
 padding-left: 2px; 
 cursor:default; 
} 
div.gridCell_narrow 
{ 
 width:30px; 
 overflow:hidden; 
 margin-left: 0px; 
 margin-right: 1px; 
 padding-left: 2px; 
 nw:expression(this.noWrap=true); 
 cursor:default; 
} 
th 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 1px solid; 
 border-left: #a4a6a4 1px solid; 
 border-bottom: #a4a6a4 1px solid; 
 background-image: url(images/default/headerbg.gif); 
 color:#ffffff; 
 font-style:normal; 
 font-weight:normal; 
 height:20px; 
 cursor:col-resize; 
 dyn-behavior:expression( 
 ondblclick == null? 
 (ondblclick = function() 
 { 
 var src = event.srcElement; 
 if(event.srcElement.tagName.toLowerCase()!="div") 
 { 
 src = src.childNodes[0]; 
 } 
 src.style.width = ""; 
 __resizeCell(src.columnIndex,src.clientWidth); 
 }):true 
 ) 
} 
th.fixed 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 1px solid; 
 border-left: #a4a6a4 1px solid; 
 border-bottom: #a4a6a4 1px solid; 
 background-image: url(images/default/headerbg.gif); 
 color:#ffffff; 
 font-style:normal; 
 font-weight:normal; 
 height:20px; 
 cursor:default; 
} 
tr.odd 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 0px solid; 
 border-left: #a4a6a4 0px solid; 
 border-bottom: #a4a6a4 1px solid; 
 noWrap; 
} 
tr.even 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 0px solid; 
 border-left: #a4a6a4 0px solid; 
 border-bottom: #a4a6a4 1px solid; 
} 
td.odd_even 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 1px solid; 
 border-left: #a4a6a4 1px solid; 
 border-bottom: #a4a6a4 1px solid; 
 noWrap; 
} 
td.select-cell 
{ 
 border-right: #a4a6a4 1px solid; 
 border-top: #a4a6a4 1px solid; 
 border-left: #a4a6a4 1px solid; 
 border-bottom: #a4a6a4 1px solid; 
} 
th{ 
 color:#ff0000; 
} 
</style>

<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> 
 <tr> 
 <td> 
 <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
 <thead> 
 <th class="fixed">选择</th> 
 <th>订单编号</th> 
 <th>订货日期</th> 
 <th>订货单位</th> 
 <th>订单类别</th> 
 <th>产品类别</th> 
 <th>版本号</th> 
 <th>订货金额</th> 
 <th>订单状态</th> 
 </thead> 
 </table> 
 </td> 
 </tr> 
 共3页 </tfoot>--> 
 <tbody> 
 <tr class="odd"> 
 <td colspan="9"> 
 
 <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
 <tbody id="order_GridBody_Cells"> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="2" /></td> 
 <td class="odd_even">DJPH001</td> 
 <td class="odd_even">2005-02-02</td> 
 <td class="odd_even">19</td> 
 <td class="odd_even">直销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">5</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="3" /> </td> 
 <td class="odd_even">DJPH001</td> 
 <td class="odd_even">2005-02-02</td> 
 <td class="odd_even">19</td> 
 <td class="odd_even">购销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">5</td> 
 <td class="odd_even">21.0000</td> 
 <td class="odd_even"> </td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="4" /> </td> 
 <td class="odd_even">DJPH889</td> 
 <td class="odd_even">2005-02-02</td> 
 <td class="odd_even">0</td> 
 <td class="odd_even">购销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">5</td> 
 <td class="odd_even">21.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="5" /> </td> 
 <td class="odd_even">DJPH889</td> 
 <td class="odd_even">2005-02-02</td> 
 <td class="odd_even">0</td> 
 <td class="odd_even">直销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">5</td> 
 <td class="odd_even">1.0000</td> 
 <td class="odd_even"> </td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="6" /> </td> 
 <td class="odd_even">tytutyjh465456</td> 
 <td class="odd_even">2005-02-02</td> 
 <td class="odd_even">0</td> 
 <td class="odd_even">购销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">0</td> 
 <td class="odd_even">21.0000</td> 
 <td class="odd_even">生产部已审核</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="7" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">21.0000</td> 
 <td class="odd_even">生产部已审核</td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="8" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">总代已审核</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="9" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">32.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="10" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even"> </td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="11" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even"> </td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="12" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="13" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="14" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="even"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="15" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">21.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 <tr class="odd"> 
 <td width="30px" class="select-cell"> 
 <input type="checkbox" name="id" value="16" /> </td> 
 <td class="odd_even">KDSZ2005050698</td> 
 <td class="odd_even">2005-05-05</td> 
 <td class="odd_even">-1</td> 
 <td class="odd_even">分销</td> 
 <td class="odd_even">KIS</td> 
 <td class="odd_even">10.2</td> 
 <td class="odd_even">12.0000</td> 
 <td class="odd_even">已取消</td></tr> 
 
 </tbody> 
 </table> 
 
 </td> 
 </tr> 
 </tbody> 
 </table> 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

表格头固定而列可滚动的效果_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：表格滚动滚动的

热门焦点

表格头固定而列可滚动的效果_javascript技巧

表格头固定而列可滚动的效果_javascript技巧

表格头固定而列可滚动的效果_javascript技巧

最新推荐

猜你喜欢

热门推荐