JavaScript 经典代码（1）

最新推荐文章于 2024-05-31 09:44:43 发布

weixin_33901843

最新推荐文章于 2024-05-31 09:44:43 发布

阅读量205

点赞数

文章标签： javascript ViewUI

任意标准数据表格（无跨行和跨列），只要设定 id 即可生效！

任意修改删除编辑表格行列

倒出生成数据表

新加功能：汉字排序、拖动表头交换列、修正几个BUG、进一步增强表格的无关性（只要在 table 中加上 id=PowerTable 即可）~~~~~~

如果在较大的页面中引用，请将 window.onload 事件的内容指向 PowerTable 之后！

写的有点乱，而且没有写注释，其实刚开始的时候仅仅是想实践一下 insertRow ~~~~~

（相关显示颜色操了点，不过可以通过变量定制）

<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 <windy_sk@126.com>
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;

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

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<=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_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;
}

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<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<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();
}