Jquery-可编者的表格 _Web前端

Jquery-可编辑的表格

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

-------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
<script type="text/javascript">
  var TempValue = "";     //全局变量临时保存当前编辑单元格的值
var CurElement = null; //当前节点

//当前编辑单元格
var InputControl = '<input border="0" style="width:100;height:20; overflow:hidden;" type="text" onblur="mouseBlur(event.srcElement)" onkeydown="saveValue(event.srcElement)"/>';

//捕获当前Element并判断是否为TD标签
function editTD(){
   if(CurElement.tagName == "TD"){
      var srcE=event.srcElement;
      var mValue = srcE.innerHTML;
      srcE.innerHTML =InputControl;
      srcE.childNodes[0].value = mValue;
      srcE.childNodes[0].focus();
      srcE.childNodes[0].select();
   }
}

//保存编辑的值，回车移动到下一个TD
function saveValue(pElement){
   if(event.keyCode == 13){
      TempValue = pElement.value;//记录<td>值
      var Parent = pElement.parentNode;
      var p=null;
      pElement.parentNode.innerHTML=TempValue;
      var TempValue = "";
      if(Parent.nextSibling != null){
          p=Parent.nextSibling;
          TempValue = p.innerHTML;
          p.innerHTML = InputControl;
          p.childNodes[0].value = TempValue;
          p.childNodes[0].focus();
          p.childNodes[0].select();
     }
     else if(Parent.parentNode.nextSibling != null){
          p=Parent.parentNode.nextSibling.childNodes;
          if(p != null){
              TempValue = p[0].innerHTML;
              p[0].innerHTML = InputControl;
              p[0].childNodes[0].value = TempValue;
              p[0].childNodes[0].focus();
              p[0].childNodes[0].select();
          }
     }
     else if(Parent.nextSibling == null && Parent.parentNode.nextSibling == null){
          TempValue = Parent.innerHTML;
          Parent.innerHTML = InputControl;
          Parent.childNodes[0].value = TempValue;
          Parent.childNodes[0].focus();
          Parent.childNodes[0].select();
     }
   }
}

//当前编辑单元格失去焦点时触发，更新td的值
function mouseBlur(CurElement){
   TempValue = CurElement.value;
   CurElement.parentNode.innerHTML=TempValue;
}

</script>
</head>

<body>
    <table cellpadding="0" cellspacing="0" border="1" width="200" height="90" style=" table-layout:fixed" id="MainTable" onclick="CurElement=event.srcElement;editTD()">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
</tr>
</table>
</body>
</html>