ホームページ > 記事 > ウェブフロントエンド > javascript操作表格_javascript技巧

javascript操作表格_javascript技巧

WBOYオリジナル: 2016-05-16 19:28:201318ブラウズ

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：让广告代码不再影响你的网页加载速度_表单特效次の記事：onpropertypchange_表单特效

続きを見る

javascript操作表格_javascript技巧

関連記事