表格在未编辑状态和编辑状态，需要定义两个不同的样式。

比如未编辑状态是lable的样式，两边有两个括号[]，表示该表格可以编辑；编辑中的表格则表示成一个input框，可以输入。

基本思路就是，在表格中直接放可输入的input标签，在未编辑的时候，利用css样式，把input标签模拟成不可编辑的lable样式。

实现代码。

CSS

.edit-marker {
               position: relative;        }            .edit-marker:before {
                   position: absolute;                content: '[';                top: 0px;                left: 2px;            }            .edit-marker:after {
                   position: absolute;                content: ']';                top: 0px;                right: 2px;            }            .edit-marker input,            .edit-marker select {
                   border-color: transparent;                box-shadow: none;            }                .edit-marker select.input-time {
                       -moz-appearance: none;                    -webkit-appearance: none;                    padding-left: 18px;                }                    .edit-marker select.input-time::-ms-expand {
                           display: none;                    }

HTML


     
                                                                     ID                             Name                        
                  
                                                                     input(td)                                                                                                
                                                   select(td)                                                                                                
                                                   select2(td)

ID	Name
input(td)
select(td)
select2(td)

※上面用到了bootstrap。使用上，只需在外围的容器（td，div都可以）上加上edit-marker类就行。

实现的效果如下

未编辑状态：

编辑状态：

3.1 普通输入框

3.2 下拉框（初期表示：没有下拉箭头，看起来完全和lable一样）

3.3 下拉框

转载于:https://www.cnblogs.com/xiashengwang/p/8065674.html

你可能感兴趣的文章