jquery 实现可编辑DIV

给realprice开始的DIV绑定click事件.

$("div[id^='realprice']").live('click',function(){
   var divedit = $(this);
   if (divedit.children("input").length > 0) {
    return false;
   }
   var inputIns = $("<input type='text'/>");  //创建input 输入框
   var oldtext = $(this).html();        //保存原有的值
   inputIns.width(divedit.width()); //设置INPUT与DIV宽度一致
   inputIns.val(divedit.html()); //将本来单元格DIV内容copy到插入的文本框INPUT中
   divedit.html(""); //删除原来单元格DIV内容
   inputIns.appendTo(divedit).focus().select(); //将需要插入的输入框代码插入DOM节点中
   inputIns.click(function () {
    return false;
   });
   //处理回车和ESC事件
   inputIns.keyup(function (event) {
    var keycode = event.which;
    if (keycode == 13) {
     divedit.html($(this).val());         //设置新值
    }
    if (keycode == 27) {
     divedit.html(oldtext);         //返回旧值
    }
   }).blur( function (event) {
      if($(this).val() != oldtext && window.confirm('是否保存修改值!')){
          divedit.html($(this).val());
                }else{
                divedit.html(oldtext);
               }
          }
         );
  
  
  });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要实现编辑的课表,可以使用LayUI中的数据表格和弹出层组件来实现。具体步骤如下: 1. 引入LayUI的数据表格和弹出层组件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script> ``` 2. 在HTML中定义一个数据表格,并设置相应的列和数据。 ```html <table class="layui-table" lay-filter="demo"> <thead> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> </thead> <tbody> <tr> <td lay-data="{field:'monday'}">语文</td> <td lay-data="{field:'tuesday'}">数学</td> <td lay-data="{field:'wednesday'}">英语</td> <td lay-data="{field:'thursday'}">物理</td> <td lay-data="{field:'friday'}">化学</td> <td lay-data="{field:'saturday'}">生物</td> <td lay-data="{field:'sunday'}">历史</td> </tr> </tbody> </table> ``` 3. 给数据表格绑定编辑事件,当单元格被点击时弹出编辑窗口。 ```javascript layui.use('table', function(){ var table = layui.table; //监听单元格编辑 table.on('edit(demo)', function(obj){ layer.prompt({ formType: 2, value: obj.value, title: '编辑课程', }, function(value, index){ obj.update({ value: value }); layer.close(index); }); }); }); ``` 4. 编写保存数据的逻辑,将编辑后的数据保存到后台数据库中。 ```javascript //保存数据 function saveData(data) { $.ajax({ type: "POST", url: "/save", data: data, success: function(res) { layer.msg(res.msg); }, error: function() { layer.msg("保存失败"); } }); } ``` 5. 最后就是完整的代码啦! ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可编辑课表</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script> </head> <body> <div class="layui-container" style="margin-top: 30px;"> <table class="layui-table" lay-filter="demo"> <thead> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> </thead> <tbody> <tr> <td lay-data="{field:'monday'}">语文</td> <td lay-data="{field:'tuesday'}">数学</td> <td lay-data="{field:'wednesday'}">英语</td> <td lay-data="{field:'thursday'}">物理</td> <td lay-data="{field:'friday'}">化学</td> <td lay-data="{field:'saturday'}">生物</td> <td lay-data="{field:'sunday'}">历史</td> </tr> </tbody> </table> </div> <script> layui.use('table', function(){ var table = layui.table; //监听单元格编辑 table.on('edit(demo)', function(obj){ layer.prompt({ formType: 2, value: obj.value, title: '编辑课程', }, function(value, index){ obj.update({ value: value }); layer.close(index); var data = { field: obj.field, value: value }; saveData(data); }); }); }); //保存数据 function saveData(data) { $.ajax({ type: "POST", url: "/save", data: data, success: function(res) { layer.msg(res.msg); }, error: function() { layer.msg("保存失败"); } }); } </script> </body> </html> ``` ### 回答2: Layui是一套基于开源的轻量级前端框架,它提供了简洁、易用的界面组件,方便开发人员快速搭建和美化前端页面。要实现编辑课表,可以借助Layui提供的表格组件和相关的事件来实现。 首先,需要引入Layui的相关文件,并在页面中创建一个表格的容器元素。可以使用Layui提供的table组件来创建一个基本的课表结构,设置表头和表体数据。可以使用table的edit属性来设置该表格为可编辑模式。 接下来,可以通过监听table的editFilter事件来处理单元格的编辑事件。这个事件会在单元格被点击进入编辑模式时触发。可以在事件回调函数中获取到当前编辑的单元格的行列索引和内容。可以通过弹出一个对话框,让用户输入或选择要修改的课程信息,然后更新表格对应单元格的内容。 当用户完成编辑后,可以通过监听table的editDone事件来处理编辑完成后的相关操作。这个事件会在单元格编辑完成并失去焦点时触发。在事件回调函数中,可以获取到编辑的单元格的行列索引和最新内容。可以将这个最新的内容保存到后台数据库中,或者实时更新到其他相关的页面中。 为了增加用户体验,可以在表格的单元格中添加一些其他的功能,如添加、删除课程、拖拽调整课程时间等。可以借助Layui提供的其他组件和事件来实现这些功能。 总结起来,要实现编辑课表,可以通过Layui框架提供的表格组件和相关事件来实现。通过监听编辑事件和编辑完成事件,处理用户的编辑操作,并将编辑后的内容保存到后台或实时更新到其他页面中。通过结合其他组件和事件,还可以增加一些其他的功能,提升用户体验。 ### 回答3: Layui是一款轻量级的前端UI框架,它主要用于简化页面的开发工作。要实现编辑的课表,可以结合Layui的表格组件和其它相关插件来实现。 首先,我们可以使用Layui的表格组件来创建课表的基本结构。通过设置表格的行数和列数,来布局课程表的每个单元格。可以使用表格的header属性来设置表头,用于显示星期几的信息。 然后,我们需要实现课表的编辑功能。可以使用Layui的form模块结合表格的编辑事件来实现。当用户点击课表的某个单元格时,可以弹出一个编辑框,让用户输入课程信息。通过监听表格的编辑事件,可以获取到用户输入的数据,然后更新到对应的表格单元格中。 除了基本的编辑功能,还可以添加其他交互操作。比如,可以设置拖拽功能,让用户可以直接拖动课程信息,改变课程的时间或位置。可以使用Layui的拖拽组件,来实现这个功能。要实现拖拽功能,还需要结合一些JavaScript代码来处理拖拽的过程和结果。 最后,为了方便管理课程信息,可以使用Layui的弹窗组件来实现添加和删除课程的功能。通过点击课表的某个按钮或图标,弹出一个弹窗,让用户输入或选择课程信息。然后,可以将用户输入的数据添加到对应的表格单元格中,或者删除选中的课程。 综上所述,使用Layui实现编辑的课表可以借助表格组件、form模块、拖拽组件和弹窗组件等功能来完成。通过合理的布局和相应的交互操作,可以让用户方便地编辑和管理课程信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值