动态表格

<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 = 1;
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);

 sel_Mode.selectedIndex=charMode;
}

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.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
     runtimeStyle.backgroundColor=act_bgc;
     dragColEnd=cellIndex;
    }else{
     runtimeStyle.backgroundColor="";
    }
   }
  }
  if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) 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="";
 }
 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-resize";
  }
 }
}

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='';
    }
   }
  }
 }
}

var charPYStr = "啊阿埃";
var charBHStr = "一乙丁";
function judge_CN(char1,char2,mode){
 var charSet=charMode?charBHStr:charPYStr;
 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.indexOf(char2.charAt(n))?1:-1);
   else  return(charSet.indexOf(char1.charAt(n))<charSet.indexOf(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.toLowerCase(),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(a);
    b=eval(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]);
 }
 
/*
 for(i=0;i<tab_arr.length;i++){
  the_tab.rows[i+1].swapNode(tab_arr[i][1]);
 }
 
====================================================================================
// tab_arr.push(new Array(the_tab.rows[i].cells[col].innerText.toLowerCase(),i));
 
 for(i=0;i<tab_arr.length;i++){
  the_tab.insertRow(-1);
  the_tab.rows[the_tab.rows.length-1].style.display="none";
  change_row(the_tab,tab_arr[i][1],the_tab.rows.length-1);
 }
 for(i=0;i<tab_arr.length;i++){
  the_table.deleteRow(1);
 }
 
====================================================================================

 tab_arr=(new Array(new Array(0,0))).concat(tab_arr);
 var temp = 1;
 var change_line=1;
 for(i=1;i<tab_arr.length;i++){
  //alert(tab_arr[temp][1] + ' - ' + temp)
  if(tab_arr[temp][1] != change_line){
   change_row(the_tab,tab_arr[temp][1],temp);
   tab_arr[temp][2] = true;
   temp = tab_arr[temp][1];
  }else{
   alert(change_line);
  }
 }
*/
 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(/<span>(5|6)<\/span>/gi,"");
 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="Button1" value="Down" onclick="Move_down(Main_Tab)">
    <input type="button" id="Button2" value="Left" onclick="Move_left(Main_Tab)">
    <input type="button" id="Button3" value="Right" onclick="Move_right(Main_Tab)">
    ) 汉字排序：
    <select id="sel_Mode" onchange="charMode=this.selectedIndex">
        <option>
        拼音
        <option>
        笔画
    </select>
    <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">
    <br>
    <textarea id="showContent" cols="100" rows="20"></textarea>
</div>