JS制作可编辑表格

xium 2008-11-04

展开全文

</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>

    //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 可以

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

文章出处：http://www./course/1_web/javascript/jsjs/200863/121234.html