表格头固定而列可滚动的效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 表格头固定而列可滚动的效果

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的表格头固定而列可滚动的效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 380 ::

收藏到网摘: n/a

javascript(js) join函数使用方法介绍 document.designMode的功能与使用方法介绍

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

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
<body bgcolor="F6F6F6" style="padding:10 10 10 10">
<div class="tableContainer" id="order_Container"> <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"><div columnIndex="0" class="gridCell_narrow">选择</div></th> <th><div columnIndex="1" class="gridCell_standard">订单编号</div></th> <th><div columnIndex="2" class="gridCell_standard">订货日期</div></th> <th><div columnIndex="3" class="gridCell_standard">订货单位</div></th> <th><div columnIndex="4" class="gridCell_standard">订单类别</div></th> <th><div columnIndex="5" class="gridCell_standard">产品类别</div></th> <th><div columnIndex="6" class="gridCell_standard">版本号</div></th> <th><div columnIndex="7" class="gridCell_standard">订货金额</div></th> <th><div columnIndex="8" class="gridCell_standard">订单状态</div></th> </thead> </table> </td> </tr> <tbody> <tr class="odd"> <td colspan="9"> <div id="order_GridBody" class="bodyContainer"> <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"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">直销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">购销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">购销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">直销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">1.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td> <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">购销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">32.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">分销</div></td> <td class="odd_even"><div class="gridCell_standard">KIS</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <div style="height:15px"></div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript(js) join函数使用方法介绍 document.designMode的功能与使用方法介绍

Javascript 中的 表格头固定而列可滚动的效果

评论 (0) All

Javascript 中的表格头固定而列可滚动的效果