动态表格powertable

<meta http-equiv="Content-Type" content="text/html; 
charset=gb2312">  
  <title>Power Table</title>  
  <style>  

  body{  

FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; 
PADDING-BOTTOM: 0px; PADDING-TOP: 0px;  
  }  
  input {  
  FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default;  
  }  
  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>  
  <script language="JavaScript1.2"> 

  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 clear_color(){  
  the_table=Main_Tab;  
  if(cur_col!=null){  
  for(i=0;i<the_table.rows.length;i++){  
  with(the_table.rows[i].cells[cur_col]){  
  style.backgroundColor=oBgc;  
  style.color=oFc;  
  }  
  }  
  }  
  if(cur_row!=null){  
  for(i=0;i<the_table.rows[cur_row].cells.length;i++) {  
  with(the_table.rows[cur_row].cells[i]){  
  style.backgroundColor=oBgc;  
  style.color=oFc;  
  }  
  }  
  }  
  if(cur_cell!=null){ 

cur_cell.children[0].contentEditable = false;  
  with(cur_cell.children[0].runtimeStyle){  
  borderLeft=borderTop="";  
  borderRight=borderBottom="";  
  backgroundColor="";  
  paddingLeft="";  
  textAlign="";  
  }  
  }  
  }

 function document.onclick(){  
  window.status = "";  
  clear_color();  
  cur_row = null;  
  cur_col = null;  
  cur_cell = null;  
  } function read_def(the_table){  
  for(var i=0;i<the_table.rows.length;i++){  
  for(var j=0;j<the_table.rows[i].cells.length;j++){  
  with(the_table.rows[i]){  

cells[j].oBgc = cells[j].currentStyle.backgroundColor;  
  cells[j].oFc = cells[j].currentStyle.color;  
  if(i==0){  
  cells[j].onmousedown = drag_start;  
  cells[j].onmouseup = drag_end;  
  }  
  }  
  }  
  }  
  } 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; 

function drag_start(){  

var the_td = get_Element(event.srcElement,"td");  
  if(the_td==null) return;  
  dragStart = true;  
  dragColStart = the_td.cellIndex;  
  drag.style.width = the_td.offsetWidth;  
  drag.style.height = the_td.offsetHeight;  
  function document.onmousemove(){  
  drag.style.display = "";  
  drag.style.top = event.y - drag.offsetHeight/2;  
  drag.style.left = event.x - drag.offsetWidth/2;  
  for(var i=0;i<Main_Tab.rows[0].cells.length;i++){  
  with(Main_Tab.rows[0].cells[i]){  
  if((event.y>offsetTop+parseInt(document.body.curren 
tStyle.marginTop) && 
event.y<offsetTop+offsetHeight+parseInt(document.bo 
dy.currentStyle.marginTop)) && 
(event.x>offsetLeft+parseInt(document.body.currentS tyle.marginLeft) 
&& event.x<offsetLeft+offsetWidth+parseInt(document.bo 
dy.currentStyle.marginLeft))){  
  runtimeStyle.backgroundColor=act_bgc;  
  dragColEnd=cellIndex;  
  }else{  

runtimeStyle.backgroundColor="";  
  }  
  }  
  }  
  if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(do 
cument.body.currentStyle.marginTop) && 
event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0] .offsetHeight+par
seInt(document.body.currentStyle.m arginTop))) dragColEnd=null;  
  }  
  drag.innerHTML = the_td.innerHTML;  
  drag.style.backgroundColor = the_td.oBgc;  
  drag.style.color = the_td.oFc;  
  } function drag_end(){  
  dragStart = false;  
  drag.style.display="none";  
  drag.innerHTML = "";  
  drag.style.width = 0;  
  drag.style.height = 0;  
  for(var i=0;i<Main_Tab.rows[0].cells.length;i++){  
  Main_Tab.rows[0].cells[i].runtimeStyle.backgroundC olor="";  
  } 

if(dragColStart!=null && dragColEnd!=null && 
dragColStart!=dragColEnd){  
  change_col(Main_Tab,dragColStart,dragColEnd);  
  if(dragColStart==sort_col)sort_col=dragColEnd;  
  else if(dragColEnd==sort_col)sort_col=dragColStart;  
  document.onclick();  
  }  
  dragColStart = null;  
  dragColEnd = null;  
  document.onmousemove=null;  
  } function clickIt(){  
  event.cancelBubble=true;  
  var the_obj = event.srcElement;  
  var i = 0 ,j = 0;  
  if(cur_cell!=null && cur_row!=0){  
  cur_cell.children[0].contentEditable = false;  
  with(cur_cell.children[0].runtimeStyle){  
  borderLeft=borderTop="";  
  borderRight=borderBottom="";  
  backgroundColor="";

paddingLeft="";  
  textAlign="";  
  }  
  }  
  if(the_obj.tagName.toLowerCase() != "table" && 
the_obj.tagName.toLowerCase() != "tbody" && 
the_obj.tagName.toLowerCase() != "tr"){  
  var the_td = get_Element(the_obj,"td");  
  if(the_td==null) return;  
  var the_tr = the_td.parentElement;  
  var the_table = get_Element(the_td,"table");  
  var i = 0;  
  clear_color();  
  cur_row = the_tr.rowIndex;  
  cur_col = the_td.cellIndex;  
  if(cur_row!=0){  
  for(i=0;i<the_tr.cells.length;i++){  
  with(the_tr.cells[i]){  
  style.backgroundColor=cur_bgc;  
  style.color=cur_fc; 

 }  
  }  
  }else{  
  if(show_col){  
  for(i=1;i<the_table.rows.length;i++){  
  with(the_table.rows[i].cells[cur_col]){  
  style.backgroundColor=cur_bgc;  
  style.color=cur_fc;  
  }  
  }  
  }  
  the_td.mode = !the_td.mode;  
  if(sort_col!=null){  
  with(the_table.rows[0].cells[sort_col])  
  removeChild(lastChild);  
  }  
  with(the_table.rows[0].cells[cur_col])  
  appendChild(the_td.mode?arrowUp:arrowDown);  
  sort_tab(the_table,cur_col,the_td.mode);  

sort_col=cur_col;  
  }  
  }  
  } function dblclickIt(){  
  event.cancelBubble=true;  
  if(cur_row!=0){  
  var the_obj = event.srcElement;  
  if(the_obj.tagName.toLowerCase() != "table" && 
the_obj.tagName.toLowerCase() != "tbody" && 
the_obj.tagName.toLowerCase() != "tr"){  
  var the_td = get_Element(the_obj,"td");  
  if(the_td==null) return;  
  cur_cell = the_td;  
  if(the_td.children.length!=1)  
  the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";  
  else if(the_td.children.length==1 && 
the_td.children[0].tagName.toLowerCase()!="div")  
  the_td.innerHTML="<div>" + the_td.innerHTML + "</div>";  
  cur_cell.children[0].contentEditable = true;  
  with(cur_cell.children[0].runtimeStyle){  
  borderRight=borderBottom="buttonhighlight 1px solid";  

borderLeft=borderTop="black 1px solid";  
  backgroundColor="#dddddd";  
  paddingLeft="5px";  
  //textAlign="center";  
  }  
  }  
  }  
  } function overIt(){  
  if(dragStart)return;  
  var the_obj = event.srcElement;  
  var i = 0;  
  if(the_obj.tagName.toLowerCase() != "table"){  
  var the_td = get_Element(the_obj,"td");  
  if(the_td==null) return;  
  var the_tr = the_td.parentElement;  
  var the_table = get_Element(the_td,"table");  
  if(the_tr.rowIndex!=0){  
  for(i=0;i<the_tr.cells.length;i++){  
  with(the_tr.cells[i]){  

runtimeStyle.backgroundColor=act_bgc;  
  runtimeStyle.color=act_fc;  
  }  
  }  
  }else{  
  for(i=1;i<the_table.rows.length;i++){  
  with(the_table.rows[i].cells(the_td.cellIndex)){  
  runtimeStyle.backgroundColor=act_bgc;  
  runtimeStyle.color=act_fc;  
  }  
  }  
  if(the_td.mode==undefined)the_td.mode = false;  
  the_td.style.cursor=the_td.mode?"n-resize":"s-resi ze";  
  }  
  }  
  } function outIt(){  
  var the_obj = event.srcElement;  
  var i=0;  
  if(the_obj.tagName.toLowerCase() != "table"){  

var the_td = get_Element(the_obj,"td");  
  if(the_td==null) return;  
  var the_tr = the_td.parentElement;  
  var the_table = get_Element(the_td,"table");  
  if(the_tr.rowIndex!=0){  
  for(i=0;i<the_tr.cells.length;i++){  
  with(the_tr.cells[i]){  
  runtimeStyle.backgroundColor='';  
  runtimeStyle.color='';  
  }  
  }  
  }else{  
  var the_table=the_tr.parentElement.parentElement;  
  for(i=0;i<the_table.rows.length;i++){  
  with(the_table.rows[i].cells(the_td.cellIndex)){  
  runtimeStyle.backgroundColor='';  
  runtimeStyle.color='';  
  }  
  }  

}}}

function judge_CN(char1,char2,mode){  
  var charSet=charMode?charPYStr:charBHStr;  
  for(var n=0;n<(char1.length>char2.length?char1.length:char2. 
length);n++){  
  if(char1.charAt(n)!=char2.charAt(n)){  
  if(mode) return(charSet.indexOf(char1.charAt(n))>charSet.ind 
exOf(char2.charAt(n))?1:-1);  
  else return(charSet.indexOf(char1.charAt(n))<charSet.ind 
exOf(char2.charAt(n))?1:-1);  
  break;  
  }  
  }  
  return(0);  
  }  
  function sort_tab(the_tab,col,mode){  
  var tab_arr = new Array();  
  var i;  
  var start=new Date;  
  for(i=1;i<the_tab.rows.length;i++){  

tab_arr.push(new 
Array(the_tab.rows[i].cells[col].innerText.toLower 
Case(),the_tab.rows[i]));  
  }  
  function SortArr(mode) {  
  return function (arr1, arr2){  
  var flag;  
  var a,b;  
  a = arr1[0];  
  b = arr2[0];  
  if(/^(\+|-)?\d+($|\.\d+$)/.test(a) && /^(\+|-
)?\d+($|\.\d+$)/.test(b)){  
  a=eval_r(a);  
  b=eval_r(b);  
  flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));  
  }else{  
  a=a.toString();  
  b=b.toString();  
  if(a.charCodeAt(0)>=19968 && b.charCodeAt(0)>=19968){  
  flag = judge_CN(a,b,mode);  
  }else{  

 flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));  
  }  
  }  
  return flag;  
  };  
  }  
  tab_arr.sort(SortArr(mode));  
  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):c 
ur_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,"");  
  the_content="<style>table{font-size: 9pt;word-break:break-
all;cursor: default;BORDER: black 1px solid;background-
color:#eeeecc;border-collapse:col lapse;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';th
is.innerText='Show Detail'}else{detail.style.display='';this.innerTex 
t='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>  

应用到程序里：

var Main_Tab = null;
var cur_row = null;
var cur_col = null;
var act_bgc = "#6985DE"; //定义鼠标滑动的背景颜色
var act_fc = "white";// 定义鼠标滑过后字体的颜色
var cur_bgc = "#A11CFF";//定义选中后的行颜色


function init(){
cur_row = null;
cur_col = null;
cur_cell = null;
Main_Tab = PowerTable;
read_def(Main_Tab);
Main_Tab.onmouseover = overIt;
Main_Tab.onmouseout = outIt;
Main_Tab.onclick = clickIt;
}
 
document.onselectstart = function(){return false;};


document.onmouseup = drag_end;


function clear_color(){
the_table=Main_Tab;
if(cur_col!=null){
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells[cur_col]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_row!=null){
for(i=0;i<the_table.rows[cur_row].cells.length;i++){
with(the_table.rows[cur_row].cells[i]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_cell!=null){
cur_cell.children[0].contentEditable = false;
with(cur_cell.children[0].runtimeStyle){
borderLeft=borderTop="";
borderRight=borderBottom="";
backgroundColor="";
paddingLeft="";
textAlign="";
}
}
}


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


function read_def(the_table){
for(var i=0;i<the_table.rows.length;i++){
for(var j=0;j<the_table.rows[i].cells.length;j++){
with(the_table.rows[i]){
cells[j].oBgc = cells[j].currentStyle.backgroundColor;
cells[j].oFc  = cells[j].currentStyle.color;
if(i==0){
cells[j].onmousedown = drag_start;
cells[j].onmouseup = drag_end;
}
}
}
}
}


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;


function drag_start(){
var the_td = get_Element(event.srcElement,"td");
if(the_td==null)
return;
if(the_td.cellIndex==0)  //禁止nbbh移动
return;
dragStart = true;
dragColStart = the_td.cellIndex;
drag.style.width = the_td.offsetWidth;
drag.style.height = the_td.offsetHeight;


function document.onmousemove(){
if(the_td.cellIndex==0) //禁止nbbh移动
return;
drag.style.display = "";
drag.style.top = event.y - drag.offsetHeight/2;
drag.style.left = event.x - drag.offsetWidth/2;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
with(Main_Tab.rows[0].cells[i]){
if(cellIndex==0)
continue;    //禁止nbbh移动
if((event.y>offsetTop+parseInt(document.getElementById("projects").offsetTop)
&& event.y<offsetTop+offsetHeight+parseInt(document.getElementById("projects").offsetTop))
&& (event.x+document.getElementById("projects").scrollLeft>offsetLeft+parseInt(document.getElementById("projects").offsetLeft)
&& event.x+document.getElementById("projects").scrollLeft<offsetLeft+offsetWidth+parseInt(document.getElementById("projects").offsetLeft))){
runtimeStyle.backgroundColor = act_bgc;
runtimeStyle.color=act_fc;
runtimeStyle.backgroundImage = "url()";
dragColEnd = cellIndex;
}else{
runtimeStyle.backgroundColor="";
runtimeStyle.backgroundImage = "url(img/thead.gif)";
}
}
}
if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.getElementById("projects").offsetTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.getElementById("projects").offsetTop)))
dragColEnd = null;
}
drag.innerHTML = the_td.innerHTML;
drag.style.backgroundColor = the_td.oBgc;
drag.style.color = the_td.oFc;
}


function drag_end(){
dragStart = false;
drag.style.display="none";
drag.innerHTML = "";
drag.style.width = 0;
drag.style.height = 0;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
Main_Tab.rows[0].cells[i].runtimeStyle.backgroundImage = "url(img/thead.gif)";
}
if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){
change_col(Main_Tab,dragColStart,dragColEnd);
document.onclick();
}
dragColStart = null;
dragColEnd = null;
document.onmousemove=null;
}


function clickIt(){
event.cancelBubble=true;
var the_obj = event.srcElement;
var i = 0 ,j = 0;
if(cur_cell!=null && cur_row!=0){
cur_cell.children[0].contentEditable = false;
with(cur_cell.children[0].runtimeStyle){
borderLeft=borderTop="";
borderRight=borderBottom="";
backgroundColor="";
paddingLeft="";
textAlign="";
}
}
if(the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr"){
var the_td = get_Element(the_obj,"td");
if(the_td==null) return;
var the_tr = the_td.parentElement;
var the_table = get_Element(the_td,"table");
var i = 0;
clear_color();
cur_row = the_tr.rowIndex;
cur_col = the_td.cellIndex;
if(cur_row!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
style.backgroundColor=cur_bgc;//选中后的行色
style.color=act_fc; //选中后的字体颜色
}
}
}
}
}


function overIt(){
if(dragStart)return;
var the_obj = event.srcElement;
var i = 0;
if(the_obj.tagName.toLowerCase() != "table"){
var the_td = get_Element(the_obj,"td");
if(the_td==null) return;
var the_tr = the_td.parentElement;
var the_table = get_Element(the_td,"table");
if(the_tr.rowIndex!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
runtimeStyle.backgroundColor=act_bgc;
runtimeStyle.color=act_fc;
}
}
}else{
for(i=1;i<the_table.rows.length;i++){
with(the_table.rows[i].cells(the_td.cellIndex)){
runtimeStyle.backgroundColor=act_bgc;
runtimeStyle.color=act_fc;
}
}
if(the_td.cellIndex!=0)      //禁止nbbh移动
the_td.style.cursor = "move";
}
}
}


function outIt(){
var the_obj = event.srcElement;
var i=0;
if(the_obj.tagName.toLowerCase() != "table"){
var the_td = get_Element(the_obj,"td");
if(the_td==null) return;
var the_tr = the_td.parentElement;
var the_table = get_Element(the_td,"table");
if(the_tr.rowIndex!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
runtimeStyle.backgroundColor='';
runtimeStyle.color='';
}
}
}else{
var the_table=the_tr.parentElement.parentElement;
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells(the_td.cellIndex)){
runtimeStyle.backgroundColor='';
runtimeStyle.color='';
}
}
}
}
}


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 encodePagiUrl(a){
var tempUrl = encodeURI(encodeURI(a.href));
a.href = tempUrl;
return true;
}


function setCols(id){
document.getElementById("cover").style.display="block";
document.getElementById(id).style.display="block";
}
function hide(id){
document.getElementById("cover").style.display="none";
document.getElementById(id).style.display="none";
}
function clickLi(obj){
if(event.srcElement.tagName!="LI")
return;
obj.firstChild.checked=!obj.firstChild.checked;
}
var isAll = false;
function checkAll(){
if(isAll)
isAll = false;
else
isAll = true;
var chs = document.ShowCon.sfield;
for(var i=0;i<chs.length;i++){
chs[i].checked = isAll;
}
}
function buildTable(){
var tableHead = document.getElementById("TableHead");
var lis = document.getElementsByTagName("li");
var size = lis.length;
var n = 0;
var num = new Array();
for(var i=0;i<size;i++){
if(!lis[i].firstChild.checked)
continue;
var newTD = tableHead.insertCell(n);
newTD.setAttribute("noWrap","true");
newTD.innerHTML = lis[i].innerText;
num[n] = i;
n++;
}
//修改数组以便显示空格
for(var i = 0; i < contents.length; i++){
var str = contents[i];
if(str.length == 0){
contents[i] = '&nbsp;';
}
}
var table = document.getElementById("PowerTable");
for(var i=0;i<pSize;i++){
var newTR = table.insertRow(i+1);
newTR.setAttribute("bgColor", i%2==0?"#FFFFFF":"#BAC9E0"); //修改powertable的背景颜色修改奇偶列的样式
for(var j=0;j<n;j++){
var newTD = newTR.insertCell(j);
newTD.setAttribute("noWrap","true");
newTD.innerHTML = contents[num[j] + allSize*i];
}
}
}
function removeTable(){
var div = document.getElementById("projects");
div.innerHTML = "<table id='PowerTable' class='projects' border='1' cellpadding='0' cellspacing='0'>"+
"<tr id='TableHead' style='font-weight: bold;'></tr>"+
"</table>";
}
function reBuildTable(predix){
var chs = document.ShowCon.sfield;
chs[0].checked = true; //选择主键
var isChecked = false;
for(var i=0;i<chs.length;i++)
if(chs[i].checked){
isChecked = true;
break;
}
if(!isChecked){
alert("请至少选择一个字段！");
return;
}
if(document.ShowCon.save.checked)
if(confirm('您确定要保存本次设置吗？该操作将会影响所有用户！')){
document.ShowCon.action = document.ShowCon.action + "&predix=" + predix;
document.ShowCon.submit();
return;
}else
alert("您取消了保存设置！");
removeTable();
buildTable();
init();
hide('control');
}