table双击td能修改内容

此篇提供给需要的人。

说实话一般的前端框架的话都会自带这个功能，但是我也懒得去翻，自己手工写个，以后要用直接调用就OK了。

自己做的成果还是挺爽的。

废话不多说，上源码。

我们先引入jQuery：

<script type="text/javascript" src="js/jquery-2.1.1.js" ></script>

PS:注意这个js引入的是我下载好的jQuery。没有的话百度搜个

首先是css样式：

*{margin: 0;padding: 0;}
        .table{
            margin: auto;
            border-collapse:collapse;
        }
        .table th,.table td{
            padding: 5px 20px;
            width: 100px;
            max-width: 100px;
            height:30px ;
            border: 1px solid #D3D3D3;
        }
        .table-td input{
            width: 100px;
            border: 0px solid #ccc; 
            padding: 7px 0px;
            border-radius: 3px; /*css3属性IE不支持*/
        }
        .table-input{
            width: 100%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;/*溢出隐藏*/
            white-space: nowrap;/*以省略号...显示*/
            position: relative;
            z-index: 1;
        }
        .table-tr{
            background-color: #8A6DE9;
        }
        table .tbody-tr:hover .table-td{
            cursor: pointer;/*变手型*/
            background: rgba(0,0,0,0.1);
        }
        #td_alert{
            width:90px;
            height:40px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            background: rgba(0,0,0,0.2);/*弹框透明*/
            border-radius: 10px;/*边框圆角*/
            position: fixed; 
            top:50%;
            left:50%;
            line-height: 40px;
        }

然后内容：

<table class="table">
            <tr class="table-tr">
                <th>ID</th>
                <th>名称</th>
                <th>爱好</th>
                <th>性别</th>
            </tr>
            <tr class="tbody-tr">
                <td class="table-td">
                    <div class="table-input">1</div>
                </td>
                <td class="table-td">
                    <div class="table-input">张三</div>
                </td>
                <td class="table-td">
                    <div class="table-input">运动</div>
                </td>
                <td class="table-td">
                    <div class="table-input">男</div>
                </td>
            </tr>
            <tr class="tbody-tr">
                <td class="table-td">
                    <div class="table-input">2</div>
                </td>
                <td class="table-td">
                    <div class="table-input">李四</div>
                </td>
                <td class="table-td">
                    <div class="table-input">打游戏</div>
                </td>
                <td class="table-td">
                    <div class="table-input">男</div>
                </td>
            </tr>
            <tr class="tbody-tr">
                <td class="table-td">
                    <div class="table-input">3</div>
                </td>
                <td class="table-td">
                    <div class="table-input">王五</div>
                </td>
                <td class="table-td">
                    <div class="table-input">听歌</div>
                </td>
                <td class="table-td">
                    <div class="table-input">女</div>
                </td>
            </tr>
        </table>

最后JS部分：

<script>
            $(function(){
                var str=""; //变量
                //双击td事件
                $(".table-td").on("dblclick",".table-input",function(){
                    str=$(this).html(); //获取当前内容
                    //添加input标签
                    var tableInput=$("<input type='text' value='"+$.trim(str)+"'/>"); 
                    $(this).html(tableInput); //更换当前内容
                    $("input").focus();    //获取焦点
                });
                //文本框失去焦点事件
                $(".table-td >.table-input").on("blur","input",function(){
                    var strVal=$(this).val(); //获取当前文本框内容
                    //获取文本框的父节点:input ↑ div
                    var page= this.parentNode;
                    if($.trim(strVal) == ""){ //如果文本框内容为空，值则为原先未改变的内容
                        page.innerHTML=$.trim(str);
                        td_alert("修改成功",1000);
                    }else{
                        page.innerHTML=$.trim(strVal);
                        td_alert("修改成功",1000);
                    }
                });
                //避免文本框双击后改变内容
                $(".table-td").on("dblclick","input",function(){
                    return false;
                });
            })
            /*
             * 返回值弹窗
             * text 名称
             * time 停留时间
             */
            function td_alert(text,time){
                var str="<div id='td_alert'>"+text+"</div>";
                $("table").append(str);//追加元素
                setTimeout(function(){$("#td_alert").remove()},time);//time 时间后 删除元素
            }
        </script>

美观度的话，自身感觉还行，就是不知道你们的胃口了。纯前端代码，可以跟后端一起用。

如果有什么好的建议，不妨留个意见`︶`γ 

如果土豪任性的，可以转链接去下载源码：https://download.csdn.net/download/qq_38508172/10661829

声明：未经作者允许禁止转载！