Jquery实现行内编辑

最新推荐文章于 2021-05-30 20:06:10 发布

好多鱼`_

最新推荐文章于 2021-05-30 20:06:10 发布

阅读量4k

点赞数 2

分类专栏： BS学习

本文链接：https://blog.csdn.net/hanxintong9/article/details/47084777

版权

BS学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

做项目的时候，UI封装了好了一个行内编辑，当时用起来的时候觉得高大上啊，好奇是怎么实现的，现在研究了一下，了解到了，其实行内编辑就是做了点小动作，让用户觉得点击这行的时候就可以对这行的内容进行编辑，点击回车的时候则可以提交所编辑的内容，其实原理很简单，下面给大家介绍下：

首先这个是行内边界的效果图，我们点击其中的一行可对其进行操作，点击Esc键退出操作，点击回车键进行操作。

原理：

其实看似是对这行进行操作，其实是在我们点击这行的时候，给这行插入一个文本框，然后将这行的值赋值给文本框，让用户看似是点击这行对其进行编辑，其实是做了一些小动作，下面我们来介绍下代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(function () {
    $("tbody tr:even").css("background-color", "#ECE9D8");
    //找到我们需要的单元格
    var numId = $("tbody td:even");
    给这些单元格注册鼠标点击事件
        numId.click(function () {

            //创建一个文本框
            var inputObj = $("<input type='text'>");
            //去掉文本框的边框
            inputObj.css("border-width", "0");
            //设置文本框中的文字大小是16px
            inputObj.css("font-size", "16px");
            //找到当鼠标点击的td,this对应的就是响应了click的那个td
            var tdObj = $(this);
            //将文本框的宽度和td的宽度相同
            inputObj.width(tdObj.width());
            //设置文本框的背景色
            inputObj.css("background-color", tdObj.css("background-color"));
            //需要将当前td中的内容放到文本框中
            inputObj.val(tdObj.html());
            //清空td中的内容
            tdObj.html("");
            //将文本框插入到td中
            inputObj.appendTo(tdObj);
        });
    });
 </span>

精简后的代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;"> numId.click(function () {
        var tdObj = $(this);
        var text = tdObj.html();
        tdObj.html("");
        var inputObj = $("<input type='text'>").css("border-width", "0")
         .css("font-size", "16px").width(tdObj.width())
         .css("background-color", tdObj.css("background-color"))
        .val(text).appendTo(tdObj);
        //是文本框插入之后被选中
        inputObj.get(0).select();

        inputObj.click(function () {

            return false;
        });
        //处理文本框上回车和esc按键的操作
        inputObj.keyup(function (event) {
            //获取当前按下键盘的键值
            
            //处理回车的情况
            var keycode = event.which

            if (keycode == 13) {
                var inputtext = $(this).val();
                tdObj.html(inputtext);

            }

            if (keycode == 27) {
                tdObj.html(text);
            }
        });
    });</span>

行内编辑就这样成功的实现了。