Heim > Artikel > Web-Frontend > javascript操作表格_javascript技巧

javascript操作表格_javascript技巧

WBOYOriginal: 2016-05-16 19:28:201319Durchsuche

<p><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</p>
<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 <windy_sk@126.com>
 You can use it freely, but u must held all the copyright items!
*/
<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>var show_col = false;
var charMode = 1;
var act_bgc = "#BEC5DE";
var act_fc = "black";
var cur_bgc = "#ccffcc";
var cur_fc = "black";
<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>function window.onload(){
 init();
<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> sel_Mode.selectedIndex=charMode;
}
<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>document.onselectstart = function(){return false;}
<P>document.onmouseup = drag_end;
<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>function document.onclick(){
 window.status = "";
 clear_color();
 cur_row  = null;
 cur_col  = null;
 cur_cell = null;
}
<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>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>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>var dragStart  = false;
var dragColStart = null;
var dragColEnd  = null;
<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>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>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>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 + "</script>

"; else if(the_td.children.length==1 && the_td.children[0].tagName.toLowerCase()!="div") the_td.innerHTML="

" + the_td.innerHTML + "

"; 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

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

var charPYStr = "

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：让广告代码不再影响你的网页加载速度_表单特效Nächster Artikel：onpropertypchange_表单特效

In Verbindung stehende Artikel

Mehr sehen