求救！！！！完成者200分！！！！不够再加！！！！我做了一个编辑页面，大家可以参考一下。

Question

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 = true;
                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;
                        if(sort_col!=null){
                                with(the_table.rows[0].cells[sort_col])
                                        removeChild(lastChild);
                        }
                        with(the_table.rows[0].cells[cur_col])
                                appendChild(the_td.mode?arrowUp:arrowDown);
                        sort_tab(the_table,cur_col,the_td.mode);
                        sort_col=cur_col;
                }
        }
}
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<the_tr.cells.length;i++){
                                with(the_tr.cells[i]){
                                        runtimeStyle.backgroundColor=act_bgc;
                                        runtimeStyle.color=act_fc;
                                }
                        }
                }else{
                        for(i=1;i<the_table.rows.length;i++){
                                with(the_table.rows[i].cells(the_td.cellIndex)){
                                        runtimeStyle.backgroundColor=act_bgc;
                                        runtimeStyle.color=act_fc;
                                }
                        }
                        if(the_td.mode==undefined)the_td.mode = true;
                        the_td.style.cursor=the_td.mode?"n-resize":"s-resize";
                }
        }
}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<the_tr.cells.length;i++){
                                with(the_tr.cells[i]){
                                        runtimeStyle.backgroundColor='';
                                        runtimeStyle.color='';
                                }
                        }
                }else{
                        var the_table=the_tr.parentElement.parentElement;
                        for(i=0;i<the_table.rows.length;i++){
                                with(the_table.rows[i].cells(the_td.cellIndex)){
                                        runtimeStyle.backgroundColor='';
                                        runtimeStyle.color='';
                                }
                        }
                }
        }
}var charPYStr = ""
function judge_CN(char1,char2,mode){
        var charSet=charMode?charPYStr:charBHStr;
        for(var n=0;n<(char1.length>char2.length?char1.length:char2.length);n++){
                if(char1.charAt(n)!=char2.charAt(n)){
                        if(mode) return(charSet.indexOf(char1.charAt(n))>charSet.indexOf(char2.charAt(n))?1:-1);
                        else  return(charSet.indexOf(char1.charAt(n))<charSet.indexOf(char2.charAt(n))?1:-1);
                        break;
                }
        }
        return(0);
}

Answer 1

function sort_tab(the_tab,col,mode){
        var tab_arr = new Array();
        var i;
        var start=new Date;
        for(i=1;i<the_tab.rows.length;i++){
                tab_arr.push(new Array(the_tab.rows[i].cells[col].innerText.toLowerCase(),the_tab.rows[i]));
        }
        function SortArr(mode) {
                return function (arr1, arr2){
                        var flag;
                        var a,b;
                        a = arr1[0];
                        b = arr2[0];
                        if(/^(\+|-)?\d+($|\.\d+$)/.test(a) && /^(\+|-)?\d+($|\.\d+$)/.test(b)){
                                a=eval(a);
                                b=eval(b);
                                flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
                        }else{
                                a=a.toString();
                                b=b.toString();
                                if(a.charCodeAt(0)>=19968 && b.charCodeAt(0)>=19968){
                                        flag = judge_CN(a,b,mode);
                                }else{
                                        flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
                                }
                        }
                        return flag;
                };
        }
        tab_arr.sort(SortArr(mode));        for(i=0;i<tab_arr.length;i++){
                the_tab.lastChild.appendChild(tab_arr[i][1]);
        }        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 add_row(the_table) {
        event.cancelBubble=true;
        var the_row,the_cell;
        the_row = cur_row==null?-1:(cur_row+1);
        clear_color();
        pre=pre+1;
        var newrow=the_table.insertRow(the_row);
                the_cell=newrow.insertCell(0);
                the_cell.innerHTML="<input id='' type='text' id='"+pre+"data0' name='"+pre+"data0' style='background-color: transparent; text-align: right; width: 100%; height: 20;border-style: none; border-width: 0px; '> ";
                the_cell=newrow.insertCell(1);
                the_cell.innerHTML="<input id='' type='text' id='"+pre+"data1' name='"+pre+"data1' style='background-color: transparent; text-align: right; width: 100%; height: 20;border-style: none; border-width: 0px; '> ";
                the_cell=newrow.insertCell(2);
                the_cell.innerHTML="<input id='' type='text' id='"+pre+"data2' name='"+pre+"data2'  style='background-color: transparent; text-align: right; width: 100%; height: 20;border-style: none; border-width: 0px; '> ";
        for (var i=3;i<the_table.rows[0].cells.length;i++) {
                the_cell=newrow.insertCell(i);
                the_cell.innerHTML="<input id='' type='text' id='"+pre+"data"+i+"' name='"+pre+"data"+i+"' style='background-color: transparent; text-align: right; width: 100%; height: 20;border-style: none; border-width: 0px; '> ";
        }
        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,table) {
        event.cancelBubble=true;
        var the_col,i,the_cell,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();
              cell=table.rows[0].insertCell(the_col);
              the_cell=the_table.rows[0].insertCell(the_col);
              cell.innerHTML="<font color='#FFFFFF'>"+the_title+"</font>";
        for(var i=1;i<the_table.rows.length;i++){
              the_cell=the_table.rows[i].insertCell(the_col);
              the_cell.innerHTML="<input type='text' id='xh' name='xh' size='20' style='background-color: transparent; width: 37; height: 20;border-style: none; border-width: 0px; '> ";
        }
        read_def(table);
        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();
}function exp_tab(the_table){
        var the_content="";
        document.onclick();
        the_content=the_table.outerHTML;
        the_content=the_content.replace(/ style=\"[^\"]*\"/g,"");
        the_content=the_content.replace(/ mode=\"(true|true)"/g,"");
        the_content=the_content.replace(/ oBgc=\"[\w#\d]*\"/g,"");
        the_content=the_content.replace(/ oFc=\"[\w#\d]*\"/g,"");
        the_content=the_content.replace(/<DIV contentEditable=true>([^<]*)<\/DIV>/ig,"$1");
        the_content="<style>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>\n"+the_content;
        var newwin=window.open("about:blank","_blank","");
        newwin.document.open();
        newwin.document.write(the_content);
        newwin.document.close();
        newwin=null;
}function data_edit_save(the_table){
          sending.style.visibility="visible";
          document.forms[0].elements("Rowlength").value = pre;
          document.forms[0].elements("Collength").value = bre;
          document.forms[0].method="post";
          document.forms[0].action="data_edit_save.jsp";
          //document.forms(0).target="popup";
          //window.open('','popup','toolbar=no,scrollbars=yes,,resizable=yes,status=no,width=650,height=350,left=50,top=50');
          document.forms[0].submit();
}

Answer 2

function document.onkeydown()
{
//alert(event.keyCode);
  if (event.keyCode == 13)
        event.keyCode = 9;
        if (event.keyCode == 37)
        event.keyCode = 8;
        if (event.keyCode == 38)
        event.keyCode = 9;
        if (event.keyCode == 39)
        event.keyCode = 7;
        if (event.keyCode == 40)
        event.keyCode = 10;
}
</script>
</HEAD>
<BODY>　 <form>
   <input type="hidden" id="Rowlength" name="Rowlength" value="">
   <input type="hidden" id="Collength" name="Collength" value="">
    <p align="center"><font size="4" color="#000080">本表为添加根项目</font>    <TABLE width="1116" border=1 cellSpacing=0 cellPadding=2 id="PowerTable">
      <tr >
         <td width="" bgcolor="#6972b4" height="14"  align="center"><p align="center"><font color="#FFFFFF">优先级</font></p></td>         <td width="" bgcolor="#6972b4" height="14"  align="center"><p align="center"><font color="#FFFFFF">kkkkkk</font></p></td>
         <td width="" bgcolor="#6972b4" height="14"  align="center"><p align="center"><font color="#FFFFFF">kkkkkk</font></p></td>
         <td width="" bgcolor="#6972b4" height="14"  align="center"><p align="center"><font color="#FFFFFF">kkkkkk</font></p></td>  
      </tr>         <tr width='250px' >
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
                    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
        
     </tr>
      </tr>         <tr width='250px' >
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
                    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
        
     </tr>
      </tr>         <tr width='250px' >
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
                    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
        
     </tr>
      </tr>         <tr width='250px' >
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
         <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
                    <td width=> <input type="text" id="2data"  name="2data"   style="background-color: transparent; text-align: right; width:100%; height: 20; border-style: none; border-width: 0px"> </td>
        
     </tr>     </table><TABLE bgColor=#6972b4 cellPadding=1 cellSpacing=0 width="1116" >
  <TBODY>
   <tr>
     <td width="161" align="center"><input type=button value=添加行 onclick=add_row(Main_Tab)>&nbsp;&nbsp;&nbsp;</td>
     <td width="161" align="center"><input type=button value=删除行 onclick=del_row(Main_Tab)>&nbsp;&nbsp;&nbsp;</td>
     <td width="161" align="center"><input type=button value=保存 onclick=data_edit_save(Main_Tab)>&nbsp;&nbsp;&nbsp;</td>
     <td width="161" align="center"><input type=button id=move value=上移   onclick=Move_up(Main_Tab)>&nbsp;&nbsp;&nbsp;</td>
     <td width="161" align="center"><input type=button id=move value=下移  onclick=Move_down(Main_Tab)>&nbsp;&nbsp;&nbsp;</td>
      </tr>
   </TBODY>
  </TABLE>
</form>
  </body>

Answer 3

建议改<input>为<textarea>

Answer 4

感谢各位关注！大家可以直接把代码烤到frontpage,旧可以看到效果了。