JQuery 行内编辑(即点即改)
行内编辑
下面是详细的代码:
<style>
.dian {
cursor: pointer;
}
</style>
//这个让鼠标 移动到 span上 的时候 是一个小手
<tr id="这里要修改的ID">
<td>
<span class="dian" onselectstart="return false" field="FlowerName">玫瑰花</span>
</td>
</tr>
//class="dian" 这个是 是一个标志,便于接下来找到 这个span。
//onselectstart="return false" 这个可以让span中的字 ,无法被选中
//field="FlowerName" 这个是存要修改的字段的。
<input type="text" class="gai" style="width:140px" />
//这个是双击之后的拼接的代码,输入完后,单击其他地方。让input 失去焦点, 用ajax 无刷新 提交到后台,访问数据库,进行修改
//**** 存旧的值
var oldValue = "";
//**** 即点即改 -点
$(document).on("dblclick",
".dian",
function () {
//判断是否已经点击,如果已经是被点击过的,就return ,不让程序再次生成input
//如果不判断,会出现非常尴尬的情况,可以自己试一试
if ($(this).children("input").attr("type") == "text") return;
oldValue = $(this).html();
$(this).html('<input type="text" class="gai" style="width:140px" />');
//将焦点放在最后。(先赋值为空,然后再获取焦点,然后再反填oldValue)
//这样就可以让焦点出现在最后,而不是出现在oldValue的最前面
$(this).children("input").val(" ").focus().val(oldValue);
}
);
//**** 即点即改 -改
$(document).on("blur",
".gai",
function () {
//这个标签
var thisInput = $(this);
//修改的ID
var ID = thisInput.parents('tr').attr('id');
//输入的值
var newValue = thisInput.val();
//要修改的字段名称
var field = thisInput.parent().attr('field');
$.ajax({
url: "/Home/FlowerUpdateValue",
type: "post",
data: {
Id: ID,
field: field,
newValue: newValue
},
success: function (data) {
if (data == 1) {
thisInput.parent().html(newValue);
//成功后将新输入的值 赋值给span
} else {
alert('no');
thisInput.parent().html(oldValue);
//失败后将旧值 赋值给span
}
}
});
}
);
拼接html标签的例子:
JQuery 行内编辑(即点即改)的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
- [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
- BootStrap行内编辑
Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...
- Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
#base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...
随机推荐
- SQL Server系统函数:日期函数
原文:SQL Server系统函数:日期函数 1.返回当前日期和时间 select GETDATE() '当前日期-精确到33毫秒' select GETUTCDATE() 'UTC日期和时间-精确到 ...
- js大数计算之展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JoinableQueue类与线程
生产者消费者的问题及其解决办法 问题 在之前的生产者消费者模型中,生产者和消费者只有一个, 那么生产者往队列里put几次,消费者就get几次,但是存在一个问题, 生产者不一定只有一个,消费者也不一定只 ...
- MYSQL的B+Tree索引树高度如何计算
前一段被问到一个平时没有关注到有关于MYSQL索引相关的问题点,被问到一个表有3000万记录,假如有一列占8位字节的字段,根据这一列建索引的话索引树的高度是多少? 这一问当时就被问蒙了,平时这也只关注 ...
- CentOS7安装Oracle11g数据库
1.关闭防火墙systemctl stop firewalled servicesystemctl disable firewalled service 2.关闭selinuxvim /etc/sel ...
- c# 引用类型和值类型的内存分配
- [Agile][Scrum][敏捷开发][DevOps中的持续性测试]一些相关流程的梳理
结合相关资料,做一下梳理 1. 所有的计划任务都是从任务看板(backlog)开始 从backlog中可以看到燃尽图(burndown Chart)来监控项目的进度情况 一个好的看板能够清晰的观测到当 ...
- 目标检测 — one-stage检测(一)
总结的很好:https://www.cnblogs.com/guoyaohua/p/8994246.html 目前主流的目标检测算法主要是基于深度学习模型,其可以分成两大类:two-stage检测算法 ...
- Pandas-Numpy-Scipy-Matplotlib
Ref:Using iloc, loc, & ix to select rows and columns in Pandas DataFrames 单纯的方括号只有两个用途:基于列的label ...
- 从c到c++<四>
总结一下:内联函数实际上就是用inline修饰的函数,这些函数会在编译时由编译器来将代码展开,而不用像上面第二点提到的人工展开,它的使用场景:代码很短.使用频率高. 具体代码如下: 对于这两者实际上还 ...