JavaScript：固定table的表头

(转)supertable像excel那样固定table的表头和第一列

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>像excel那样固定table的表头和第一列</title> <style type="text/css"> .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h…

JavaScript：固定table的表头

当表格数据很多,以致于容器块元素出现滚动条.而在滚动滚动条的时候,数据行会被块元素遮挡.若要保持表格的head部分始终在可视范围内,我们需要对表头进行特殊的样式设置.下面的jsp代码可以实现表头固定,经过测试可以直接使用.在IE浏览器下,拉动滚动条时表头会抖动,在谷歌下确实很流程,估计是浏览器的兼容性问题. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head…

固定table的表头同时固定列

table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class="tableContainer"> <div class="sideTable"> <span>产品小类</span> <div id="sideTable"> <table> <…

bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面可是因为数据的列比較多.所以横向显示不下,为了较好的显示,将table包裹在了一个.table-responsive元素里那么在较小的视口(viewport)时,则能够通过滑动来查看整条数据,从而能保证总体页面的协调性. 刚才说了,数据列比較多,且第一列是后面数据的全部者,那么观察者在看数据的时候肯定是要相应着数据全部者来看的.那么问题来了若是滑动到…

asp.net table表格表头及列固定实现

http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示:…

js Table冻结表头示例代码

Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0…

Javascript 固定表格表头

遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口在网上找到很多相关的插件,要不就是太复杂,要不就是满足不了我的要求于是自己动手写了一个简单的JS方法思路就是将thead里的tr克隆到tbody里然后将tbody里的首行tr跟thead里的tr大小一致将thead里的表头tr克隆并插入到tbody里将插入到的tbody里的tr内容清除并移除相关属性和大小,仅作为占位使用设置tbody大小…

纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

最近做的后台管理系统要处理大量的表格原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 <style> div{ white-space: nowrap;//强制不折行 } </style> 新的问题是强制换行之后整个宽度超出了body 于是考虑到把…

html5 table的表头固定的HTML代码

table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>固定表头可以纵向滚动的html表格</title> <style type="text/css"> #table_div{ width:80%; margin-left: 50px; } #…

固定Table的头部和左边的列-在Knockout Js使用场景下

要求:固定Table的头部和左边的列场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 提供了一个不错的方案,简洁明了. 问题来了,在Knockout Js被用于绑定Table的数据源时候,上文中的JS就不起作用了,具体说就是无法固定列. 解决方案很简单,修改其一条JS代码即可. 原因就在于:使用Knockout…

layui table动态表头改变表格头部重新加载表格

改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</ti…

[分享·JavaScript]提取Table中的内容到XML对象

在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见笑了. 下面的JS请保存为“TableProcess.js” //***************获取Table中的数据,并提供Xml内容的支持类*********** //获取指定id对应的Table对象 function TableXmlEngen(oTab) { var oTable; if (…

使用C#或javascript将Table里的数据导出到Excel

原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代码即可: @{ Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" }); } 其中divId为table…

JavaScript遍历table

JavaScript遍历table 1.说明遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"…

使用css固定table第一列

.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;} .fixedTable tr{line-height: 30px;border:1px solid #fff;} .fixedTable tr:first-child{height…

原生javascript 固定表头原理与源码

我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令起了个 "fix-header" ,有人叫 "freeze-header" ,算了,看心情吧,最近心情不太好就不改了~~~ 想了想,我还是改成原生吧,angularjs就是个毛毛~~~. 先讲一下思路: 1.想一想,再想一想,肯定用定位了,具体是绝对定位还是固定定位,看实际情况: 2.clone 一份thead元素,用于再创建一个定位的表头: …

html Table实现表头固定

最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那就是平时我们设计表格的时候,通常都想将表格的头部进行固定,而表格的body部分能够进行滚动的效果,其实这个实现起来很简单的,但是对于初学div+css布局的同学来说,还是有些帮助的. 先体验一下操作感受: 序号内容 1 我只是用来测试的 2 我只是用来测试的 3 我只是用来测试的 4 我只是用来测…

Saiku如何固定查询结果table的表头和首列

在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件使用后效果都不理想,所以决定自己动手,丰衣足食. 我的思路来自:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html 使用四个table,其中一个为saiku原有的,再增加3个,思路效果图: js代码实现: 1.找到SaikuTab…