table双击td能修改内容

此篇提供给需要的人。

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

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

废话不多说，上源码。

我们先引入jQuery：

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;
        }

然后内容：

            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
            
        

ID	名称	爱好	性别
1	张三	运动	男
2	李四	打游戏	男
3	王五	听歌	女

最后JS部分：

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

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

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

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