JS制作可编辑表格

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

</</span>head>

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

<</span>script>


  

    //dom创建文本框
    
    var input = document.createElement_x("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.getElementByIdx_x("editTable").ondblclick=editCell;

</</span>script>

 

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

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