JQuery实现可编辑的表格

最新推荐文章于 2021-06-16 22:37:28 发布

wustrive

最新推荐文章于 2021-06-16 22:37:28 发布

阅读量81

点赞数

分类专栏： JQuery 文章标签： jQuery CSS JavaScript HTML ViewUI

JQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的可编辑表格实现方案，使用HTML与JavaScript构建，并利用jQuery简化DOM操作。通过监听单元格点击事件，动态替换文本内容为输入框，实现单元格内容的在线编辑功能。

edit.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>可以编辑的表格</title>
   <!-- <link type ="text/css" rel="stylesheet" href="css/edit.css" />-->
    <script type="text/javascript" src="jslib/jquery1.5.js"></script>
    <script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
    <table border="1px">

            <tr>
                <td>编辑</td>
                <td>表格</td>
            </tr>

    </table>
</body>
</html>

jqueryedit.js:

$(document).ready(function(){
    var tds=$("td");
    tds.click(tdclick);
});


function tdclick(){
         var td=$(this);
         //1,取出当前td中的文本内容保存起来
        var text=td.text();
        //2,清空td里面的内容
        td.html(""); //也可以用td.empty();
        //3，建立一个文本框，也就是input的元素节点
        var input=$("<input>");
        //4，设置文本框的值是保存起来的文本内容
        input.attr("value",text);
        input.keyup(function(event){
             var myEvent =event||window.event;
             var kcode=myEvent.keyCode;
            if(kcode==13){
                var inputnode=$(this);
                var inputtext=inputnode.val();
                var tdNode=inputnode.parent();
                tdNode.html(inputtext);
                tdNode.click(tdclick);
            }
        });
        //5，将文本框加入到td中
        td.append(input);       
       //6,清除点击事件
        td.unbind("click");
}