动态表格(PowerTable)网页特效代码

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 色彩表格 -> 动态表格(PowerTable)网页特效代码

动态表格(PowerTable)网页特效代码

作者:动态表格(PowerTable) 网页特效代码演示发布时间:2007-11-19 14:16:49 发布人: admin

var Main_Tab	= null;
var cur_row	= null;
var cur_col	= null;
var cur_cell	= null;
var Org_con	= "";
var sort_col	= null;

var show_col	= false;
var charMode	= true;
var act_bgc	= "#BEC5DE";
var act_fc	= "black";
var cur_bgc	= "#ccffcc";
var cur_fc	= "black";

function init(){
	cur_row			= null;
	cur_col			= null;
	cur_cell		= null;
	sort_col		= null;
	Main_Tab 		= PowerTable;
	read_def(Main_Tab)
	Main_Tab.onmouseover	= overIt;
	Main_Tab.onmouseout	= outIt;
	Main_Tab.onclick	= clickIt;
	Main_Tab.ondblclick	= dblclickIt;
	Org_con			= Main_Tab.outerHTML;
	
	arrowUp = document.createElement("SPAN");
	arrowUp.innerHTML	= "5";
	arrowUp.style.cssText 	= "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";

arrowDown = document.createElement("SPAN");
	arrowDown.innerHTML	= "6";
	arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}

function window.onload(){
	init();
	
	drag = document.createElement("DIV");
	drag.innerHTML		= "";
	drag.style.textAlign 	= "center";
	drag.style.position 	= "absolute";
	drag.style.cursor 	= "hand";
	drag.style.border 	= "1 solid black";
	drag.style.display 	= "none";
	drag.style.zIndex 	= "999";
	
	document.body.insertBefore(drag);
	setInterval("judge_move()",100);
	setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}

function judge_move(){
	move[0].disabled=(cur_row == null || cur_row<=1);
	move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
	move[2].disabled=(cur_col == null || cur_col==0);
	move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}

document.onselectstart	= function(){return false;}

document.onmouseup	= drag_end;

function document.onclick(){
	window.status = "";
	clear_color();
	cur_row  = null;
	cur_col  = null;
	cur_cell = null;
}

function get_Element(the_ele,the_tag){
	the_tag = the_tag.toLowerCase();
	if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	while(the_ele=the_ele.offsetParent){
		if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
	}
	return(null);
}

var dragStart		= false;
var dragColStart	= null;
var dragColEnd		= null;

for(i=0;i<tab_arr.length;i++){
		the_tab.lastChild.appendChild(tab_arr[i][1]);
	}

window.status = " (Time spent: " + (new Date - start) + "ms)";
}

function change_row(the_tab,line1,line2){
	the_tab.rows[line1].swapNode(the_tab.rows[line2])
}

function change_col(the_tab,line1,line2){
	for(var i=0;i<the_tab.rows.length;i++)
		the_tab.rows[i].cells[line1].swapNode(the_tab.rows[i].cells[line2]);
}

function Move_up(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row<=1)return;
	change_row(the_table,cur_row,--cur_row);
}

function Move_down(the_table){
	event.cancelBubble=true;
	if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
	change_row(the_table,cur_row,++cur_row);
}

function Move_left(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==0)return;
	change_col(the_table,cur_col,--cur_col);
	if(cur_col==sort_col)sort_col=cur_col+1;
	else if(cur_col+1==sort_col)sort_col=cur_col;
}

function Move_right(the_table){
	event.cancelBubble=true;
	if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
	change_col(the_table,cur_col,++cur_col);
	if(cur_col==sort_col)sort_col=cur_col-1;
	else if(cur_col-1==sort_col)sort_col=cur_col;
}

function add_row(the_table) {
	event.cancelBubble=true;
	var the_row,the_cell;
	the_row = cur_row==null?-1:(cur_row+1);
	clear_color();
	var newrow=the_table.insertRow(the_row);
	for (var i=0;i<the_table.rows[0].cells.length;i++) {
		the_cell=newrow.insertCell(i);
		the_cell.innerText="NewRow_" + the_cell.parentElement.rowIndex;
	}
	read_def(the_table);
}

function del_row(the_table) {
	if(the_table.rows.length==1) return;
	var the_row;
	the_row = (cur_row==null || cur_row==0)?-1:cur_row;
	the_table.deleteRow(the_row);
	cur_row = null;
	cur_cell=null;
}

function add_col(the_table) {
	event.cancelBubble=true;
	var the_col,i,the_cell;
	the_col = cur_col==null?-1:(cur_col+1);
	var the_title=prompt("Please input the title: ","Untitled");
	if(the_title==null)return;
	if(the_col!=-1  &&  the_col<=sort_col  &&  sort_col!=null)sort_col++;
	the_title=the_title==""?"Untitled":the_title
	clear_color();
	for(var i=0;i<the_table.rows.length;i++){
		the_cell=the_table.rows[i].insertCell(the_col);
		the_cell.innerText=i==0?the_title:("NewCol_" + the_cell.cellIndex);
	}
	read_def(the_table);
}

function del_col(the_table) {
	if(the_table.rows[0].cells.length==1) return;
	var the_col,the_cell;
	the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
	if(the_col!=-1  &&  the_col<sort_col  &&  sort_col!=null)sort_col--;
	else if(the_col==sort_col)sort_col=null;
	for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deleteCell(the_col);
	cur_col = null;
	cur_cell=null;
}

function res_tab(the_table){
	the_table.outerHTML=Org_con;
	init();
}

function exp_tab(the_table){
	var the_content="";
	document.onclick();
	the_content=the_table.outerHTML;
	the_content=the_content.replace(/ style=\"[^\"]*\"/g,"");
	the_content=the_content.replace(/ mode=\"(false|true)"/g,"");
	the_content=the_content.replace(/ oBgc=\"[\w#\d]*\"/g,"");
	the_content=the_content.replace(/ oFc=\"[\w#\d]*\"/g,"");
	the_content=the_content.replace(/<DIV contentEditable=false>([^<]*)<\/DIV>/ig,"$1");
	the_content="<style>table{font-size: 9pt;word-break:break-all;cursor: default;BORDER: black 1px solid;background-color:#eeeecc;border-collapse:collapse;border-Color:#999999;align:center;}</style>\n"+the_content;
	var newwin=window.open("about:blank","_blank","");
	newwin.document.open();
	newwin.document.write(the_content);
	newwin.document.close();
	newwin=null;
}
</script>
<table width="100%" border="1" cellspacing="0" cellpadding="2" id="PowerTable">
<tr align="middle" bgcolor="#ffcc00">
<td>First Name</td>
<td>Last Name</td>
<td>Team</td>
<td>Engine</td>
<td>Tyres</td>
<td>Fastest Lap</td>
<td>国家</td></tr>
<tr>
<td>Michael</td>
<td>Schumacher</td>
<td>Ferrari</td>
<td>Ferrari</td>
<td>Bridgestone</td>
<td>1.15.872</td>
<td>德国</td></tr>
<tr>
<td>Rubens</td>
<td>Barrichello</td>
<td>Ferrari</td>
<td>Ferrari</td>
<td>Bridgestone</td>
<td>1.16.760</td>
<td>法国</td></tr>
<tr>
<td>Ralph</td>
<td>Schumacher</td>
<td>Williams</td>
<td>BMW</td>
<td>Michelin</td>
<td>1.16.297</td>
<td>美国</td></tr>
<tr>
<td>Juan-Pablo</td>
<td>Montoya</td>
<td>Williams</td>
<td>BMW</td>
<td>Michelin</td>
<td>1.17.123</td>
<td>柬埔寨</td></tr>
<tr>
<td>David</td>
<td>Coulthard</td>
<td>McLaren</td>
<td>Mercedes</td>
<td>Bridgestone</td>
<td>1.16.423</td>
<td>泰国</td></tr>
<tr>
<td>Mika</td>
<td>Hakkinen</td>
<td>McLaren</td>
<td>Mercedes</td>
<td>Bridgestone</td>
<td>1.16.979</td>
<td>越南</td></tr>
<tr>
<td>Jarno</td>
<td>Trulli</td>
<td>Jordan</td>
<td>Honda</td>
<td>Bridgestone</td>
<td>1.16.459</td>
<td>菲律宾</td></tr>
<tr>
<td>Ricardo</td>
<td>Zonta</td>
<td>Jordan</td>
<td>Honda</td>
<td>Bridgestone</td>
<td>1.17.328</td>
<td>英国</td></tr>
<tr>
<td>Olivia</td>
<td>Panis</td>
<td>BAR</td>
<td>Honda</td>
<td>Bridgestone</td>
<td>1.16.771</td>
<td>蒙古</td></tr>
<tr>
<td>Jacques</td>
<td>Villeneuve</td>
<td>BAR</td>
<td>Honda</td>
<td>Bridgestone</td>
<td>1.17.035</td>
<td>马来西亚</td></tr>
<tr>
<td>Kimi</td>
<td>Raikkonen</td>
<td>Sauber</td>
<td>Petronas</td>
<td>Bridgestone</td>
<td>1.16.875</td>
<td>缅甸</td></tr>
<tr>
<td>Nick</td>
<td>Heidfeld</td>
<td>Sauber</td>
<td>Petronas</td>
<td>Bridgestone</td>
<td>1.17.165</td>
<td>朝鲜</td></tr>
<tr>
<td>Eddie</td>
<td>Irvine</td>
<td>Jaguar</td>
<td>Cosworth</td>
<td>Michelin</td>
<td>1.18.016</td>
<td>中国</td></tr>
<tr>
<td>Pedro</td>
<td>de la Rosa</td>
<td>Jaguar</td>
<td>Cosworth</td>
<td>Michelin</td>
<td>1.18.015</td>
<td>俄罗斯</td></tr>
<tr>
<td>Hugh</td>
<td>Gengine</td>
<td>Lotus</td>
<td>Renault</td>
<td>Michelin</td>
<td>1.15.015</td>
<td>韩国</td></tr>
<tr>
<td>Gloria</td>
<td>Slap</td>
<td>Lotus</td>
<td>Renault</td>
<td>Michelin</td>
<td>1.15.012</td>
<td>日本</td></tr>
</table>
<p>
<input type="button" value="ins_row" onclick="add_row(Main_Tab)">
<input type="button" value="ins_col" onclick="add_col(Main_Tab)">
<input type="button" value="Del_row" onclick="del_row(Main_Tab)">
<input type="button" value="Del_col" onclick="del_col(Main_Tab)">
<input type="button" value="Restore" onclick="res_tab(Main_Tab)">
<input type="button" value="Export" onclick="exp_tab(Main_Tab)">
 ( Move: 
<input type="button" id="move" value="Up" onclick="Move_up(Main_Tab)">
<input type="button" id="move" value="Down" onclick="Move_down(Main_Tab)">
<input type="button" id="move" value="Left" onclick="Move_left(Main_Tab)">
<input type="button" id="move" value="Right" onclick="Move_right(Main_Tab)"> )

<span style="cursor:hand; color: red; text-Decoration: underline" onclick="if(detail.style.display==''){detail.style.display='none';this.innerText='Show Detail'}else{detail.style.display='';this.innerText='Hide Detail'}">Show Detail</span>
</p>
<div id="detail" style="display:none">
<input type="text" id="monitor" size="30" style="width:200px">

<textarea id="showContent" cols="100" rows="20">
<a href="http://web.archive.org/web/20150322071201/http://myjs.jz123.cn/">欢迎访问中国建站之家网页特效集</a>

动态表格(PowerTable) 网页特效代码演示

将本文收藏到QQ书签与更多好友分享

上一篇：文章：Microsoft标题表格网页特效代码下一篇：文章：宽度为一象素的表格网页特效代码

网页特效

动态表格(PowerTable)网页特效代码

本类浏览排行 »

本站推荐文章 »