javascript操作表
34196 ワード
<P><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">
/*
This following code are designed and writen by Windy_sk <[email protected]>
You can use it freely, but u must held all the copyright items!
*/</P>
<P>var Main_Tab = null;
var cur_row = null;
var cur_col = null;
var cur_cell = null;
var Org_con = "";
var sort_col = null;</P>
<P>var show_col = false;
var charMode = 1;
var act_bgc = "#BEC5DE";
var act_fc = "black";
var cur_bgc = "#ccffcc";
var cur_fc = "black";</P>
<P>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;
arrow = document.createElement("SPAN");
arrow.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";
}</P>
<P>function window.onload(){
init();</P>
<P> 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);</P>
<P> sel_Mode.selectedIndex=charMode;
}</P>
<P>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);
}</P>
<P>document.onselectstart = function(){return false;}</P>
<P>document.onmouseup = drag_end;</P>
<P>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="";
}
}
}</P>
<P>function document.onclick(){
window.status = "";
clear_color();
cur_row = null;
cur_col = null;
cur_cell = null;
}</P>
<P>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;
}
}
}
}
}</P>
<P>function get_Pos(the_obj){
the_top = the_obj.offsetTop - document.body.scrollTop;
the_left = the_obj.offsetLeft - document.body.scrollLeft;
while(the_obj=the_obj.offsetParent){
the_top += the_obj.offsetTop;
the_left += the_obj.offsetLeft;
}
this.top = the_top;
this.left = the_left;
}</P>
<P>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);
}</P>
<P>var dragStart = false;
var dragColStart = null;
var dragColEnd = null;</P>
<P>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 + document.body.scrollTop - drag.offsetHeight/2;
drag.style.left = event.x + document.body.scrollLeft - drag.offsetWidth/2;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
var the_cell = new get_Pos(Main_Tab.rows[0].cells[i]);
with(Main_Tab.rows[0].cells[i]){
if((event.y>the_cell.top+parseInt(document.body.currentStyle.marginTop)-offsetHeight/2 && event.y<the_cell.top+offsetHeight/2+parseInt(document.body.currentStyle.marginTop)) && (event.x>the_cell.left+parseInt(document.body.currentStyle.marginLeft) && event.x<the_cell.left+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
runtimeStyle.backgroundColor=act_bgc;
dragColEnd=cellIndex;
}else{
runtimeStyle.backgroundColor="";
}
}
}
var the_line = new get_Pos(Main_Tab.rows[0]);
if(!(event.y>the_line.top+parseInt(document.body.currentStyle.marginTop)-Main_Tab.rows[0].offsetHeight/2 && event.y<the_line.top+parseInt(document.body.currentStyle.marginTop)+Main_Tab.rows[0].offsetHeight/2)) dragColEnd=null;
}
drag.innerHTML = the_td.innerHTML;
drag.style.backgroundColor = the_td.oBgc;
drag.style.color = the_td.oFc;
}</P>
<P>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;
}</P>
<P>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;
arrow.innerHTML = the_td.mode?"5":"6";
the_table.rows[0].cells[cur_col].insertBefore(arrow);
sort_tab(the_table,cur_col,the_td.mode);
sort_col=cur_col;
}
}
}</P>
<P>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";
}
}
}
}</P>
<P>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(typeof the_td.mode=="undefined")the_td.mode = false
the_td.style.cursor=the_td.mode?"n-resize":"s-resize";
}
}
}</P>
<P>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='';
}
}
}
}
}</P>
<P>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);
}</P>
<P>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);
}
====================================================================================</P>
<P> 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)";
}</P>
<P>function change_row(the_tab,line1,line2){
the_tab.rows[line1].swapNode(the_tab.rows[line2])
}</P>
<P>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]);
}</P>
<P>function Move_up(the_table){
event.cancelBubble=true;
if(cur_row==null || cur_row<=1)return;
change_row(the_table,cur_row,--cur_row);
}</P>
<P>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);
}</P>
<P>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;
}</P>
<P>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;
}</P>
<P>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);
}</P>
<P>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;
}</P>
<P>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);
}</P>
<P>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;
}</P>
<P>function res_tab(the_table){
the_table.outerHTML=Org_con;
init();
}</P>
<P>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>
"+the_content;
var newwin=window.open("export.htm","_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)> )
：
<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:300px">
<textarea id=showContent cols=100 rows=20></textarea>
<textarea cols=100 rows=20>
：</P>
<P> （ ）， id ！</P>
<P> </P>
<P> </P>
<P> ： 、 、 BUG、 （ table id=PowerTable ）~~~~~~</P>
<P> ， window.onload PowerTable ！</P>
<P> ， ， insertRow ~~~~~</P>
<P>（ ， ）
</textarea>
</div>
</P>
：http://www.jb51.net/article/345.htm