html css表格编辑,Css+JS模拟实现可编辑的表格

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

比如未编辑状态是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;

}

JS

$(function(){

// 移除样式用的JS

$(".edit-marker input, .edit-marker select").on("focus",function(){

$(this).closest(".edit-marker").attr("marker-container", true).removeClass("edit-marker");

}).on("blur",function(){

$(this).closest("[marker-container]").addClass("edit-marker").removeAttr("marker-container");

});

});

HTML

IDName

input(td)select(td)

00:00

00:10

select2(td)

Item1

Item2

Item3

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

实现的效果如下

未编辑状态：

编辑状态：

3.1 普通输入框

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

3.3 下拉框

html+css+js 模拟win7桌面

不贴代码了,直接上传附件. 附件下载: win7desktop

Vue+Mock.js模拟登录和表格的增删改查

有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

css配合js模拟的select下拉框

css配合js模拟的select下拉框

可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

JQuery实战--可以编辑的表格

廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...

随机推荐

CDC的StretchBlt函数载入位图时图片失真问题

最近遇到加载的bmp图片出现失真问题,查找得知需要用SetStretchBltMode函数设置拉伸模式. 函数原型:int SetSTretchBltMode(HDC hdc, int iStretc ...

V-rep学习笔记：转动关节1

V-REP(Virtual Robot Experimentation Platform),是全球领先的机器人及模拟自动化软件平台.V-REP让使用者可以模拟整个机器人系统或其子系统(如感测器或机械结 ...

康乐不风流之爱解题的pde灌水王张祖锦

康乐不风流之爱解题的pde灌水王张祖锦 师弟: 邓洪存 (现在烟台大学任教) 好吧, 我一直想写写康乐园里与我相熟的这几个人, 不如趁此机会开始. 第一批人物为张祖锦.苏延辉.张会春.黄显涛.刘兴兴. ...

Function对象

Function对象是js中很重要的一个元素,js中所有自定义的函数都是Function对象,所以String,Number,Boolean,function等都是Function对象.所以,在使用t ...

Java 内存区域和GC机制-java概念理解

推荐几篇关于java内存介绍的文章 Java 内存区域和GC机制 http://www.cnblogs.com/hnrainll/archive/2013/11/06/3410042.html    ...

js中继承的方法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下:

tensorflow点滴笔记

1.模型保存 模型保存需要使用函数 tf.train.Saver(), a)创建saver时,可以指定需要存储的tensor,如果没有指定,则全部保存. b) 创建saver时,可以指定保存的模型个数 ...

java：打印菱形图案(传参打印的自定义字符和行数)

打印菱形图案: 代码实现: public class Hello { public static void main(String args[]) { LingXingPrint("#&qu ...

获取DataView行数据

1.  dv.Table.Rows[0]["price"].ToString();这种方法虽然很长,但意思很清晰. 2.  dv[0]["price"].T ...

WPF 跟踪命令和撤销命令(复原)

WPF 命令模型缺少一个特性是复原命令.尽管提供了一个 ApplicationCommands.Undo 命令,但是该命令通常被用于编辑控件(如 TextBox 控件),以维护它们自己的 Undo 历 ...