- 博客分类:
- Javascript
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>动态删除表格</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="JavaScript">
- 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.οnmοuseοver= overIt;
- Main_Tab.οnmοuseοut= outIt;
- Main_Tab.οnclick= clickIt;
- Main_Tab.οndblclick= 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();
- /*www.codefans.net*/
- 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.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.ο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-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 = "";
- 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.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]);
- }
- window.status = " (Time spent: " + (new Date - start) + "ms)";
- }
- function change_row(the_tab,line1,line2){
- the_tab.rows[line1].swapNode(the_tab.rows[line2])
- }
- function change_col(the_tab,line1,line2){
- for(var i=0;i<the_tab.rows.length;i++)
- the_tab.rows[i].cells[line1].swapNode(the_tab.rows[i].cells[line2]);
- }
- function Move_up(the_table){
- event.cancelBubble=true;
- if(cur_row==null || cur_row<=1)return;
- change_row(the_table,cur_row,--cur_row);
- }
- function Move_down(the_table){
- event.cancelBubble=true;
- if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
- change_row(the_table,cur_row,++cur_row);
- }
- function Move_left(the_table){
- event.cancelBubble=true;
- if(cur_col==null || cur_col==0)return;
- change_col(the_table,cur_col,--cur_col);
- if(cur_col==sort_col)sort_col=cur_col+1;
- else if(cur_col+1==sort_col)sort_col=cur_col;
- }
- function Move_right(the_table){
- event.cancelBubble=true;
- if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
- change_col(the_table,cur_col,++cur_col);
- if(cur_col==sort_col)sort_col=cur_col-1;
- else if(cur_col-1==sort_col)sort_col=cur_col;
- }
- function add_row(the_table) {
- event.cancelBubble=true;
- var the_row,the_cell;
- the_row = cur_row==null?-1:(cur_row+1);
- clear_color();
- var newrow=the_table.insertRow(the_row);
- for (var i=0;i<the_table.rows[0].cells.length;i++) {
- the_cell=newrow.insertCell(i);
- the_cell.innerText="NewRow_" + the_cell.parentElement.rowIndex;
- }
- read_def(the_table);
- }
- function del_row(the_table) {
- if(the_table.rows.length==1) return;
- var the_row;
- the_row = (cur_row==null || cur_row==0)?-1:cur_row;
- the_table.deleteRow(the_row);
- cur_row = null;
- cur_cell=null;
- }
- function add_col(the_table) {
- event.cancelBubble=true;
- var the_col,i,the_cell;
- the_col = cur_col==null?-1:(cur_col+1);
- var the_title=prompt("Please input the title: ","Untitled");
- if(the_title==null)return;
- if(the_col!=-1 && the_col<=sort_col && sort_col!=null)sort_col++;
- the_title=the_title==""?"Untitled":the_title
- clear_color();
- for(var i=0;i<the_table.rows.length;i++){
- the_cell=the_table.rows[i].insertCell(the_col);
- the_cell.innerText=i==0?the_title:("NewCol_" + the_cell.cellIndex);
- }
- read_def(the_table);
- }
- function del_col(the_table) {
- if(the_table.rows[0].cells.length==1) return;
- var the_col,the_cell;
- the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
- if(the_col!=-1 && the_col<sort_col && sort_col!=null)sort_col--;
- else if(the_col==sort_col)sort_col=null;
- for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deleteCell(the_col);
- cur_col = null;
- cur_cell=null;
- }
- function res_tab(the_table){
- the_table.outerHTML=Org_con;
- init();
- }
- function exp_tab(the_table){
- var the_content="";
- document.onclick();
- the_content=the_table.outerHTML;
- the_content=the_content.replace(/ style=\"[^\"]*\"/g,"");
- the_content=the_content.replace(/ mode=\"(false|true)"/g,"");
- the_content=the_content.replace(/ oBgc=\"[\w#\d]*\"/g,"");
- the_content=the_content.replace(/ oFc=\"[\w#\d]*\"/g,"");
- the_content=the_content.replace(/<DIV contentEditable=false>([^<]*)<\/DIV>/ig,"$1");
- the_content="<style>table{font-size: 9pt;word-break:break-all;cursor: default;BORDER: black 1px solid;background-color:#eeeecc;border-collapse:collapse;border-Color:#999999;align:center;}</style>\n"+the_content;
- var newwin=window.open("about:blank","_blank","");
- newwin.document.open();
- newwin.document.write(the_content);
- newwin.document.close();
- newwin=null;
- }
- </script>
- <TABLE width=100% border=1 cellSpacing=0 cellPadding=2 id="PowerTable">
- <TR align=middle bgColor=#ffcc00>
- <TD>First Name</TD>
- <TD>Last Name</TD>
- <TD>Team</TD>
- <TD>Engine</TD>
- <TD>Tyres</TD>
- <TD>Fastest Lap</TD>
- <TD>国家</TD></TR>
- <TR>
- <TD>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>Gloria</TD>
- <TD>Slap</TD>
- <TD>Lotus</TD>
- <TD>Renault</TD>
- <TD>Michelin</TD>
- <TD>1.15.012</TD>
- <TD>日本</TD></TR>
- </TABLE>
- <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';this.innerText='Show Detail'}else{detail.style.display='';this.innerText='Hide Detail'}">Show Detail</span>
- <div id=detail style="display:none">
- <input type=text id=monitor size=30 style="width:200px">
- <textarea id=showContent cols=100 rows=20>