javascript结合Ajax制作的可编辑表格代码-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_2008/article/details/4586347

javascript制作的这个可编辑表格，只要双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax 可以同一个页面上完成对数据的修改功能，非常实用。
<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;
        }

        //用单元格的值来填充文本框的值
        input.value=currentCell.innerHTML;
             //当文本框丢失焦点时调用last
        input.οnblur=last;
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
         input.focus();
    }
    function last()
    {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }
     //最后为表格绑定处理方法.
    document.getElementById("editTable").οndblclick=editCell;
</script>