JS制作可编辑表格

 

 

< html >
< head >
< title ></ title >

</ head >

< body >
     < table id = " editTable "  border = " 1 " >
         < tr >
             < td > aaaaaaa </ td >
             < td > bbbbbbb </ td >
             < td > ccccccc </ td >
         </ tr >
         < tr >
             < td > ddddddd </ td >
             < td > eeeeeee </ td >
             < td > fffffff </ td >
         </ tr >
         < tr >
             < td > gggggggg </ td >
             < td > hhhhhhhh </ td >
             < td > iiiiiiii </ td >
         </ tr >
     </ table >
</ body >
</ html >

< script >


  

     // dom创建文本框
    
     var  input  =  document.createElement( " input " );
    input.type = " text "  ;
    
  
     
     // 得到当前的单元格
     var  currentCell ; 
     function  editCell(event)
     ... {
        if(event==null)
       ...{
            currentCell=window.event.srcElement;
        }
        else
        ...{
            currentCell=event.target;
        }
        //根据Dimmacro 的建议修定下面的bug 非常感谢
        if(currentCell.tagName=="TD")...{

        //用单元格的值来填充文本框的值
        input.value=currentCell.innerHTML;
             //当文本框丢失焦点时调用last
        input.onblur=last;
        input.ondblclick=last;
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
           //根据liu_binq63 的建议修定下面的bug 非常感谢
        input.focus();

        }

    }
    
     function  last()
     ... {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }
  
    



     // 最后为表格绑定处理方法.
    document.getElementById( " editTable " ).ondblclick = editCell;

</ script >

 

双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax 可以

同一个页面上完成对数据的修改功能，非常实用。