js 实现页面表格动态分页
<!-- <HTML> <HEAD> <TITLE>print</TITLE> <meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
/**//**
* 打印相关
*/
@media print
{}{
.notprint
{
display:none;
}
.PageNext
{}{
page-break-after:always;
}
}
@media screen
{}{
.notprint
{
display:inline;
cursor:hand;
}
}
.text1
{}{
width: 120px;
overflow: hidden;
text-overflow:ellipsis;
}
.text2
{}{
width: 80px;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
<script language="javascript">
<!--
/**//**
** ==================================================================================================
** 类名：CLASS_PRINT
** 功能：打印分页
** 示例：
---------------------------------------------------------------------------------------------------
var pp = new CLASS_PRINT();
window.onload = function(){
pp.header = document.getElementById("tabHeader");
pp.content= document.getElementById("tabDetail");
pp.footer = document.getElementById("tabFooter");
pp.hideCols("5,7");
pp.hideRows("3,15");
pp.pageSize = 10;
}
<BODY onbeforeprint="pp.beforePrint()" onafterprint="pp.afterPrint()">
---------------------------------------------------------------------------------------------------
** 作者：ttyp
** 邮件：ttyp@21cn.com
** 日期：2006-11-10
** ==================================================================================================
*/
function CLASS_PRINT()
{
this.header = null;
this.content = null;
this.footer = null;
this.board = null;
this.pageSize = 10;
var me = this;
//哈希表类
function Hashtable()
{
this._hash = new Object();
this.add = function(key,value){
if(typeof(key)!="undefined"){
if(this.contains(key)==false){
this._hash[key]=typeof(value)=="undefined"?null:value;
return true;
} else {
return false;
}
} else {
return false;
}
}
this.remove = function(key){delete this._hash[key];}
this.count = function(){var i=0;for(var k in this._hash){i++;} return i;}
this.items = function(key){return this._hash[key];}
this.contains = function(key){return typeof(this._hash[key])!="undefined";}
this.clear = function(){for(var k in this._hash){delete this._hash[k];}}
}
//字符串转换为哈希表
this.str2hashtable = function(key,cs){
var _key = key.split(/,/g);
var _hash = new Hashtable();
var _cs = true;
if(typeof(cs)=="undefined"||cs==null){
_cs = true;
} else {
_cs = cs;
}
for(var i in _key){
if(_cs){
_hash.add(_key[i]);
} else {
_hash.add((_key[i]+"").toLowerCase());
}
}
return _hash;
}
this._hideCols = this.str2hashtable("");
this._hideRows = this.str2hashtable("");
this.hideCols = function(cols){
me._hideCols = me.str2hashtable(cols)
}
this.isHideCols = function(val){
return me._hideCols.contains(val);
}
this.hideRows = function(rows){
me._hideRows = me.str2hashtable(rows)
}
this.isHideRows = function(val){
return me._hideRows.contains(val);
}
this.afterPrint = function()
{
var table = me.content;
if(typeof(me.board)=="undefined"||me.board==null){
me.board = document.getElementById("divPrint");
if(typeof(me.board)=="undefined"||me.board==null){
me.board = document.createElement("div");
document.body.appendChild(me.board);
}
}
if(typeof(table)!="undefined"){
for(var i =0;i<table.rows.length;i++){
var tr = table.rows[i];
for(var j=0;j<tr.cells.length;j++){
if(me.isHideCols(j)){
tr.cells[j].style.display = "";
}
}
}
}
me.content.style.display = '';
me.header.style.display = '';
me.footer.style.display = '';
me.board.innerHTML = '';
}
this.beforePrint = function(){
var table = me.content;
if(typeof(me.board)=="undefined"||me.board==null){
me.board = document.getElementById("divPrint");
if(typeof(me.board)=="undefined"||me.board==null){
me.board = document.createElement("div");
document.body.appendChild(me.board);
}
}
if(typeof(table)!="undefined"&&this.hideCols.length>0){
for(var i =0;i<table.rows.length;i++){
var tr = table.rows[i];
for(var j=0;j<tr.cells.length;j++){
if(me.isHideCols(j)){
tr.cells[j].style.display = "none";
}
}
}
}
///开始分页
var pageSize = this.pageSize;
var head = me.header;
var foot = me.footer;
var page = new Array();
var rows = "";
var rowIndex= 1;
var cp = 0;
var tp = 0;
for(i=1;i<table.rows.length;i++){
if(this.isHideRows(i)==false){
if((((rowIndex-1)%pageSize)==0&&rowIndex>1)||i==table.rows.length){
page[page.length] = getTable(head,table,rows,foot);
rows = getOuterHTML(table.rows[i]) + "\n" ;
rowIndex= 2;
} else {
rows += getOuterHTML(table.rows[i]) + "\n";
rowIndex++;
}
}
}
if(rows.length>0){
page[page.length] = getTable(head,table,rows,foot);
}
tp = page.length;
for(var i=0;i<page.length;i++){
page[i] = page[i].replace(/\<\!--ct-->/g,(i+1)+'/' + tp).replace(/\<\!--cp--\>/g,i+1).replace(/\<\!--tp--\>/g,tp);
}
head.style.display = 'none';
foot.style.display = 'none';
table.style.display = 'none';
if(page.length>1){
me.board.innerHTML = page.join("\n<div class='pageNext'></div>");
}else{
me.board.innerHTML = page.join("");
}
}
function getOuterHTML (node) {
if(typeof(node)!="undefined"&&typeof(node.outerHTML)!="undefined"){
return node.outerHTML;
}
var emptyElements = {
HR: true, BR: true, IMG: true, INPUT: true
};
var specialElements = {
TEXTAREA: true
};
var html = '';
switch (node.nodeType){
case Node.ELEMENT_NODE:
html += '<';
html += node.nodeName;
if (!specialElements[node.nodeName]) {
for (var a = 0; a < node.attributes.length; a++)
html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
html += '>';
if (!emptyElements[node.nodeName]){
html += node.innerHTML;
html += '<\/' + node.nodeName + '>';
}
}
else
switch (node.nodeName){
case 'TEXTAREA':
var content = '';
for (var a = 0; a < node.attributes.length; a++)
if (node.attributes[a].nodeName.toLowerCase() != 'value')
html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
else
content = node.attributes[a].nodeValue;
html += '>';
html += content;
html += '<\/' + node.nodeName + '>';
break;
}
break;
case Node.TEXT_NODE:
html += node.nodeValue;
break;
case Node.COMMENT_NODE:
html += '<!' + '--' + node.nodeValue + '--' + '>';
break;
}
return html;
}
function getTable(header,table,content,footer){
var htm = "";
if(typeof(header)!="undefined"){
htm += getOuterHTML(header);
}
if(typeof(table)!="undefined"){
htm += "\n<" + table.tagName;
for(var i =0;i<table.attributes.length;i++){
if(table.attributes[i].specified){
if(table.attributes[i].name=="style")
htm += " style='" + table.style.cssText + "'";
else
htm += " " + table.attributes[i].nodeName + "='" + table.attributes[i].nodeValue + "'";
}
}
if(table.rows.length>0){
htm += ">\n" + getOuterHTML(table.rows[0]) + content + "</" + table.tagName + ">";
} else {
htm += ">\n" + content + "</" + table.tagName + ">\n";
}
}
if(typeof(footer)!="undefined"){
htm += getOuterHTML(footer);
}
return htm;
}
if(!window.attachEvent){
window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2]);}
}
}
var pp = new CLASS_PRINT();
window.onload = function()
{
pp.header = document.getElementById("tabHeader");
pp.content= document.getElementById("tabDetail");
pp.footer = document.getElementById("tabFooter");
pp.hideCols("5,7");
pp.hideRows("3,15");
pp.pageSize = 10;
}
//-->
</script>
</HEAD>
<BODY onbeforeprint="pp.beforePrint()" onafterprint="pp.afterPrint()">
<table border=0 width="95%" align=center id="tabHeader">
<tr>
<td align="center"><font size='6' face='楷体_gb2312'>元件列表</font></td>
</tr>
<tr>
<td><strong>日期:2005年12月12日</strong></td>
</tr>
</table>
<table border=1 width="95%" style="border-collapse:collapse;" align=center cellpadding=3 id="tabDetail">
<tr bgcolor='#e8f4ff'>
<td align="center" width="35">序号</td>
<td width="160">产品名称</td>
<td>规格型号</td>
<td align="center">品牌</td>
<td align="right">数量</td>
<td width="125">供应商</td>
<td align="right">实际数量</td>
<td align="center">包装</td>
<td align="center">需用日期</td>
</tr>
<tr>
<td align="center">1</td>
<td><span class="text2"><nobr>
贴片电路
</nobr></span>
</td>
<td>
<span class="text1" title='ADE7755 63 7'>
<nobr>
ADE7755ARS
</nobr></span>
</td>
<td align="center">ADI</td>
<td align="right">1000</td>
<td width="125"><span class="text1" title ='世健国际贸易（上海）有限公司'><nobr>世健国际贸易（上海）有限公司</nobr></span></td>
<td align="right">1003</td>
<td align="center">59</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">2
</td>
<td>
<span class="text2"><nobr>
贴片电容
</nobr></span>
</td>
<td>
<span class="text1" title='CC0805 0.1μ 168 7'>
<nobr>
C2012X7R1H104KT
</nobr></span>
</td>
<td align="center">TDK</td>
<td align="right">8000</td>
<td width="125"><span class="text1" title ='南京商络电子有限公司'><nobr>南京商络电子有限公司</nobr></span></td>
<td align="right">8000</td>
<td align="center">4000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">3
</td>
<td>
<span class="text2"><nobr>
贴片电容
</nobr></span>
</td>
<td>
<span class="text1" title='CC0805 20p 162 7'>
<nobr>
C2012COG1H200JT
</nobr></span>
</td>
<td align="center">TDK</td>
<td align="right">2000</td>
<td width="125"><span class="text1" title ='南京商络电子有限公司'><nobr>南京商络电子有限公司</nobr></span></td>
<td align="right">4000</td>
<td align="center">4000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">4
</td>
<td>
<span class="text2"><nobr>
贴片电容
</nobr></span>
</td>
<td>
<span class="text1" title='CC0805 33N 765 7'>
<nobr>
C2012X7R1H333KT
</nobr></span>
</td>
<td align="center">TDK</td>
<td align="right">4000</td>
<td width="125"><span class="text1" title ='南京商络电子有限公司'><nobr>南京商络电子有限公司</nobr></span></td>
<td align="right">4000</td>
<td align="center">4000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">5
</td>
<td>
<span class="text2"><nobr>
压敏电阻
</nobr></span>
</td>
<td>
<span class="text1" title='MY20K681 186 7'>
<nobr>
GND20D681K
</nobr></span>
</td>
<td align="center">中普</td>
<td align="right">1000</td>
<td width="125"><span class="text1" title ='苏州中普电子有限公司'><nobr>苏州中普电子有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">1000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">6
</td>
<td>
<span class="text2"><nobr>
晶振
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
HC-49U/S 3.579545MHz 20pf 带垫片
</nobr></span>
</td>
<td align="center">海创</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>武汉海创电子有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">200</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">7
</td>
<td>
<span class="text2"><nobr>
安规电容
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
275V-X2-0.47μF
</nobr></span>
</td>
<td align="center">昱电</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海昱电电子有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">1000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">8
</td>
<td>
<span class="text2"><nobr>
电解电容
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
CD112 16V 33μF
</nobr></span>
</td>
<td align="center">Samyoung</td>
<td align="right">2000</td>
<td width="125"><span class="text1"><nobr>上海文得贸易有限公司</nobr></span></td>
<td align="right">2000</td>
<td align="center">2000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">9
</td>
<td>
<span class="text2"><nobr>
电解电容
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
CD112S 16V 220μF
</nobr></span>
</td>
<td align="center">Samyoung</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海文得贸易有限公司</nobr></span></td>
<td align="right">2000</td>
<td align="center">2000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">10
</td>
<td>
<span class="text2"><nobr>
电解电容
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
CD112S 35V 470μF
</nobr></span>
</td>
<td align="center">Samyoung</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海文得贸易有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">1000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">11
</td>
<td>
<span class="text2"><nobr>
插件电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RSF2BJ 470Ω
</nobr></span>
</td>
<td align="center">KOA</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海凡元电子有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">100</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">12
</td>
<td>
<span class="text2"><nobr>
发光二极管
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
L-314LRC-A-SS
</nobr></span>
</td>
<td align="center">HUADING</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海沪鼎电子有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">1000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">13
</td>
<td>
<span class="text2"><nobr>
插件二、三极管
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
1N4744A
</nobr></span>
</td>
<td align="center">MCC</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>励智电子（上海）有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">14
</td>
<td>
<span class="text2"><nobr>
磁珠
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
B62
</nobr></span>
</td>
<td align="center">JONES</td>
<td align="right">2000</td>
<td width="125"><span class="text1"><nobr>北京中石伟业技术有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">15
</td>
<td>
<span class="text2"><nobr>
晶振
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
CFS206 32.768kHz 20ppm/12.5pf
</nobr></span>
</td>
<td align="center">CITIZEN</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海创邦国际贸易有限公司</nobr></span></td>
<td align="right">1000</td>
<td align="center">1000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">16
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-071K2
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">17
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805FR-071K2
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">2000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">18
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-0710R
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">19
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-0710K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">20
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-07150K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">21
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805FR-071K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">2000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">22
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-072K4
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">23
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-0720K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">24
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-072K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">25
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-07390K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">3000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">26
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-0739K
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
<tr>
<td align="center">27
</td>
<td>
<span class="text2"><nobr>
贴片电阻
</nobr></span>
</td>
<td>
<span class="text1">
<nobr>
RC0805JR-074K7
</nobr></span>
</td>
<td align="center">YAGEO</td>
<td align="right">1000</td>
<td width="125"><span class="text1"><nobr>上海衡谦贸易有限公司</nobr></span></td>
<td align="right">5000</td>
<td align="center">5000</td>
<td align="center">2005-11-04</td>
</tr>
</table>
<table width="95%" border=0 id="tabFooter" align=center cellpadding=4>
<tr>
<td><!--ct--></td><td align=right>上海市XXX有限公司</td>
</tr>
</table>
<div id="divPrint"></div>
<table width="95%" align=center>
<tr>
<td align=right>
<input type=button id="bp" onclick="pp.beforePrint();this.disabled = true;document.getElementById('ap').disabled = false;" value="打印前" style="border:1px solid #000000"><input id="ap" type=button onClick="pp.afterPrint();this.disabled = true;document.getElementById('bp').disabled = false;" value="打印后" style="border:1px solid #000000" disabled=true><input type=button value='打印' onClick="window.print()" style="border:1px solid #000000">
</td>
</tr>
</table>
</BODY>
</HTML>
-->
优质内容筛选与推荐>>1、JavaEE大型项目实战视频教程
2、java sql.date和util.date区别
3、一学长做的软件
4、Centos7环境下 安装ffmage2.7.1过程
5、static的全部用法收集整理