实现可以编辑的表格

最新推荐文章于 2024-04-03 02:33:56 发布

Z_ouyang

最新推荐文章于 2024-04-03 02:33:56 发布

阅读量660

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Z_ouyang/article/details/50939979

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现可以编辑的表格 </title>
    <style>
        td,tr{
            border: 1px solid skyblue;
        }
    </style>
</head>
<dody>
    <table>
        <tbody>
        <tr>
            <td>123123132</td>
            <td>4465465465456</td>
        </tr>
        </tbody>
    </table>
</dody>
<script src="js/jquery.min.js"></script>
<script>
    //让所有td拥有一个点击事件
    $(document).ready(function(){
        var tds = $("td");
        tds.click(tdclick);
    });

    //td被点击的事件
    function tdclick(){
        //      var clickfunction = this; //将当前的方法进行保存
        //0.保存当前的td节点
        var td = $(this);
        //1.取出当前td中的文本内容保存起来
        var text = $(this).text();
        //2.清空td里面的内容
        td.html('');  //也可以用td.empty();
        //3.建立一个文本框，也就是input的元素及诶单
        var input = $("<input>");
        //4.设置文本框的值是保存起来的文本内容
        input.attr("value",text);
        //5.将文本框加入到td中
        //4.5让文本框可以响应键盘按下的事件，主要用于处理回车确认
        input.keyup(function(event){
            //0.获取当前用户按下的键值
            //解决不同浏览器获取事件对象的差异
            var myEvent = event || window.event;
            var kcode = myEvent.keyCode;
            //1.判断是否是回车按下
            if(kcode ==13){
                var  inputnode = $(this);
                //2.保存当前文本框的内容
                var inputtext = inputnode.val();
                //3.清空td里面的内容
                var tdNode = inputnode.parent();
                //4.将保存的文本个框的内容填充到td中
                tdNode.html(inputtext);
                //5.让td重新拥有点击事件
                tdNode.click(tdclick);
            }
        });
        td.append(input);   //也可以用input.appendTo(td)；

        //需要清除td上的点击事件
        td.unbind("click");
    }
</script>
</html>