动态表格powertable

待我称王封你为后i 2022-09-25 08:17 169阅读 0赞

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.οnmοusemοve=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 οnclick=add\_row(Main\_Tab)>    
  <input type=button value=ins\_col οnclick=add\_col(Main\_Tab)>    
  <input type=button value=Del\_row οnclick=del\_row(Main\_Tab)>    
  <input type=button value=Del\_col οnclick=del\_col(Main\_Tab)>    
  <input type=button value=Restore οnclick=res\_tab(Main\_Tab)>    
  <input type=button value=Export οnclick=exp\_tab(Main\_Tab)>    
  ( Move:    
  <input type=button id=move value=Up οnclick=Move\_up(Main\_Tab)>    
  <input type=button id=move value=Down   
οnclick=Move\_down(Main\_Tab)>    
  <input type=button id=move value=Left   
οnclick=Move\_left(Main\_Tab)>    
  <input type=button id=move value=Right   
οnclick=Move\_right(Main\_Tab)> )

<span style="cursor:hand; color: red; text-Decoration:   
underline"   
οnclick="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.οnmοusemοve=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');  
\}