awen7916
- 浏览: 285077 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (208)
- Oracle (21)
- webservice (7)
- java (33)
- java序列化反序列化 (0)
- weblogic (4)
- ajaxFileUpload (2)
- uploadify (1)
- jquery (7)
- MAXIMO (4)
- smartgit (1)
- css (3)
- POI (1)
- photoshop (0)
- linux (1)
- highchart 动态添加数据 (0)
- highchart (5)
- json (7)
- spring (11)
- maven (10)
- app (7)
- ASCII (1)
- mysql (26)
- excel (1)
- tomcat (3)
- bootstrap (1)
- ztree (2)
- dubbo (4)
- nginx (5)
- hadoop (3)
- osgi (3)
- ext (2)
- cxf (4)
- hibernate (1)
- 协议 (1)
- axis2 (1)
- javascript (2)
- vue (2)
- EhCache (2)
- Quartz (1)
- sqlite (1)
- saas (0)
- ionic (1)
- developer (1)
- maven 常用命令 (1)
- eclipse (1)
- mac (2)
- mongoldb (1)
- svn (1)
最新评论
-
wyb243：
大家千万不要按照这个写！！！PreparedStatement ...
JdbcTemplate插入后获取自增ID -
北雁南飞33：
有源码分享吗
自定义分页标签结合spring mvc、bootstrap、mybatis、mysql的使用 -
xcg992224：
大哥 不需要手动调用回收 是你在for的里面不应该每次都去ne ...
Java 垃圾回收测试
<!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">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
table th
{
background-color: Gray;
}
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 400px; overflow: auto;">
<table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
<thead>
<tr>
<th rowspan="2" style="width: 30%">
项目
</th>
<th colspan="2">
常规性税金
</th>
<th colspan="2">
非常规性税金
</th>
<th rowspan="2" style="width: 10%">
工程税
</th>
</tr>
<tr>
<th style="width: 15%">
城建税
</th>
<th style="width: 15%">
教育费附加%
</th>
<th style="width: 15%">
堤围防护费%
</th>
<th style="width: 15%">
个人所得税%
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
table th
{
background-color: Gray;
}
table tbody td
{
word-break: break-all;
word-wrap: break-word;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 400px; overflow: auto;">
<table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
<thead>
<tr>
<th rowspan="2" style="width: 30%">
项目
</th>
<th colspan="2">
常规性税金
</th>
<th colspan="2">
非常规性税金
</th>
<th rowspan="2" style="width: 10%">
工程税
</th>
</tr>
<tr>
<th style="width: 15%">
城建税
</th>
<th style="width: 15%">
教育费附加%
</th>
<th style="width: 15%">
堤围防护费%
</th>
<th style="width: 15%">
个人所得税%
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
发表评论
-
jquery.validate
2015-07-22 19:20 1350主要分几部分jquery.validate 基本用法jqu ... -
jquery 调用iframe页面中js的方法 兼容Ie,FF,chore浏览器
2015-06-23 22:33 933iframefunction()是子页面的方法 $(wi ... -
jQuery Validate验证框架详解
2015-06-16 15:32 671jQuery Validate验证框架详解 jQuery校 ... -
table固定表头v3
2015-05-13 14:18 709<!DOCTYPE html PUBLIC " ... -
table固定表头v2.0
2015-04-20 09:42 611<!DOCTYPE html PUBLIC " ... -
js与jquery获得页面大小、滚动条位置、元素位置
2015-04-09 09:01 630//页面位置及窗口大小 function GetPageSi ...
相关推荐
"移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题，提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先，我们需要创建一个...
js table 固定表头
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
在"html+table固定表头和列"的压缩包中，可能包含了一个实现这个功能的示例。运行`index.html`文件，可以查看实际效果。通常，它会结合HTML、CSS和可能的JavaScript来实现固定表头和列的功能。 五、兼容性和优化 ...
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
总的来说，实现"table固定表头和指定列"的功能，需要掌握CSS布局技巧、JavaScript事件处理以及可能的兼容性和性能优化知识。通过学习提供的压缩包文件，你可以深入理解并实践这些技术，提升你的前端开发能力。
为了解决这个问题，"Table 固定表头插件"应运而生，它使得在滚动查看长表格内容时，表头能够始终保持可见，便于用户定位和理解数据。 固定表头插件（Fixed Header Table）是Web开发中的一个实用工具，主要应用于...
固定表头示例 /* CSS样式，用于基础样式和布局 */ <table id="fixed-header-table"> 列1 列2 列3 <!-- 表格内容行 --> </table> // JavaScript代码，用于实现固定表头效果 ``` ...
"js table固定表头,固定列,全浏览器兼容"这个主题就涉及到了这一关键功能的实现，特别是要确保在不同浏览器上，包括对老旧浏览器如IE8及以上的支持。 首先，固定表头（Fixed Header）是指当表格内容滚动时，表头...
为解决这个问题，就需要实现一个固定表头的效果，即无论表格如何滚动，表头始终固定在页面的顶部。 要实现这个效果，有几种常用的方法，主要包括使用CSS定位和JavaScript。而根据提供的文件内容，本文介绍了一种...
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
在网页设计中，数据展示经常使用到表格（Table），尤其是数据量大时，为了方便用户浏览，固定表头成为一种常见的需求。固定表头可以使用户在滚动页面时始终保持表头可见，以便清楚地知道每一列对应的数据含义。本文...
下面我们将深入探讨如何使用 jQuery 和相关的 CSS 技术来创建一个具有固定表头和固定列的表格，并确保全浏览器兼容。 首先，jQuery 是一个强大的 JavaScript 库，它简化了 DOM 操作、事件处理、动画和Ajax交互。在...
在网页设计中，固定表头是一项常见的需求，特别是在处理大量数据时，用户需要在滚动查看内容时保持表头可见，以便清楚地了解列对应的数据。本文将深入探讨如何使用CSS来实现这一功能，并通过分析提供的两个示例文件...
固定表头和列头
js固定表头和第一列固定，内容变化
【固定列头表头ListScroll】是一种在Android开发中实现的高级UI组件，它结合了ListView和ScrollView的优点，主要用于展示大量数据并具有横向滚动和纵向滚动功能的表格。这种组件通常用于显示复杂的数据结构，例如...
实现固定表头的方法多种多样，其中JavaScript是一种常见的解决方案。JavaScript可以通过监听滚动事件，动态修改表头的位置和样式来实现这一功能。以下是一些关键步骤和涉及的知识点： 1. **HTML 结构**：首先，我们...
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...