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

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

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

实现代码。

CSS

  1. .edit-marker {
  2. position: relative;
  3. }
  4.  
  5. .edit-marker:before {
  6. position: absolute;
  7. content: '[';
  8. top: 0px;
  9. left: 2px;
  10. }
  11.  
  12. .edit-marker:after {
  13. position: absolute;
  14. content: ']';
  15. top: 0px;
  16. right: 2px;
  17. }
  18.  
  19. .edit-marker input,
  20. .edit-marker select {
  21. border-color: transparent;
  22. box-shadow: none;
  23. }
  24.  
  25. .edit-marker select.input-time {
  26. -moz-appearance: none;
  27. -webkit-appearance: none;
  28. padding-left: 18px;
  29. }
  30.  
  31. .edit-marker select.input-time::-ms-expand {
  32. display: none;
  33. }

JS

  1. <script>
  2. $(function(){
  3. // 移除样式用的JS
  4. $(".edit-marker input, .edit-marker select").on("focus",function(){
  5. $(this).closest(".edit-marker").attr("marker-container", true).removeClass("edit-marker");
  6. }).on("blur",function(){
  7. $(this).closest("[marker-container]").addClass("edit-marker").removeAttr("marker-container");
  8. });
  9.  
  10. });
  11. </script>

HTML

  1. <table id="table" class="table table-bordered table-condensed">
  2. <thead>
  3. <tr>
  4. <th>ID</th>
  5. <th><span>Name</span></th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9.  
  10. <tr>
  11. <td>input(td)</td>
  12. <td class="edit-marker">
  13. <input type="text" class="form-control" value="wang" />
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>select(td)</td>
  18. <td class="edit-marker">
  19. <select class="form-control input-sm input-time ">
  20. <option value="1">00:00</option>
  21. <option value="2">00:10</option>
  22. </select>
  23. </td>
  24. </tr>
  25. <tr>
  26. <td>select2(td)</td>
  27. <td class="edit-marker">
  28. <select class="form-control input-sm kyumucombo">
  29. <option value=""></option>
  30. <option value="0901">Item1</option>
  31. <option value="0902">Item2</option>
  32. <option value="0903">Item3</option>
  33. </select>
  34. </td>
  35. </tr>
  36. </tbody>
  37. </table>
  1. ※上面用到了bootstrap。使用上,只需在外围的容器(tddiv都可以)上加上edit-marker类就行。

实现的效果如下

未编辑状态:

编辑状态:

3.1 普通输入框

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

3.3 下拉框

Css+JS模拟实现可编辑的表格的更多相关文章

  1. html+css+js 模拟win7桌面

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

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

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

  3. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  4. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  5. webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来

    前言: Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码, 大大提高了HTML/CSS代码编写的速度,比如下面 ...

  6. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  7. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

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

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

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

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

随机推荐

  1. (面试题)两个对象值相同 (x.equals(y) == true) ,但却可有不同的 hash code ,这 句话对不对

    答:不对,有相同的 hash code这是java语言的定义:1) 对象相等则hashCode一定相等:2) hashCode相等对象未必相等 1.如果是基本变量,没有hashcode和equals方 ...

  2. pyspark dataframe 常用操作

    spark dataframe派生于RDD类,但是提供了非常强大的数据操作功能.当然主要对类SQL的支持.   在实际工作中会遇到这样的情况,主要是会进行两个数据集的筛选.合并,重新入库.   首先加 ...

  3. 解决iPad/iPhone下手机号码会自动被加上a标签的问题

    解决办法: 在页面顶部<head></head>中增加: <meta name="format-detection" content="te ...

  4. java 中获得 资源文件方法

    1 java 中获取资源文件的方法 项目目录如下 获取当前项目的目录路径 方法一:使用类名 MergeDocHandler.class.getClassLoader().getResource(&qu ...

  5. 对于android浏览器的一些看法

    首先我先声明我不是一个浏览器开发者,只是近段时间看了一些关于浏览器的东西,才有一些看法. 在几年前开发手机的web 页面,都经常因为JS插件不兼容android WebView内核,导致开发浪费大量时 ...

  6. 网页与APP中那些优美的登陆表单

    我从Dribbble收集了20个漂亮的登陆表单案例.希望你看后能从中受益,并对你以后的登陆表单设计有帮助.设计一个登陆表单是非常容易,但大多设计都很糟糕.毫无亮点.无论如何,这篇Dribbble案例集 ...

  7. vue-webpack快速建立项目模板

  8. haproxy rpm制做

    [root@c01 tmp]# fpm -s dir -t rpm -v 1.7.7 -n haproxy --before-install /tmp/haproxy_before.sh --afte ...

  9. java: 保留两位小数4种方法

    import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...

  10. .NET Core2.0 环境下MVC模式的支付宝扫码支付接口-沙箱环境开发测试

    所有配置以及相关信息均可以从PC支付中获取 使用的生成二维码的组件名为QRCoder,该组件引用了一个第三方实现的System.Drawing类库,和支付宝官网类似 当面付SDK为Alipay.Aop ...