JS动态表格

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2007-10-11 17:55 只看该作者

JS动态表格

[html]&lt;!--
All Files Design & Write by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: [email]seasonx@163.net[/email]
--&gt;
&lt;meta http-equiv="Content-Type" content="text/html;" charset=gb2312"&gt;
&lt;title&gt;Power Table&lt;/title&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;script language="JavaScript1.2"&gt;
/*
 This following code are designed and writen by Windy_sk &lt;[email]seasonx@163.net[/email]&gt;
 You can use it freely, but u must held all the copyright items!
*/

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&lt;=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 document.onclick(){
 window.status = "";
 clear_color();
 cur_row  = null;
 cur_col  = null;
 cur_cell = null;
}

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;

tab_arr=(new Array(new Array(0,0))).concat(tab_arr);
 var temp = 1;
 var change_line=1;
 for(i=1;i&lt;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&lt;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&lt;=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&lt;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&lt;=sort_col && sort_col!=null)sort_col++;
 the_title=the_title==""?"Untitled":the_title
 clear_color();
 for(var i=0;i&lt;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&lt;sort_col && sort_col!=null)sort_col--;
 else if(the_col==sort_col)sort_col=null;
 for(var i=0;i&lt;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();
}

提示：您可以先修改部分代码再运行

搜索更多相关主题的帖子: 动态表格

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜