jQuery双击编辑td数据
html
<td class="remark" style="width: 200px;">
{$vo.remark}
</td>
js
$('table#ai').on("dblclick",".remark",function(){
let $td=$(this); //获取被双击的td单元格
let _t=$td.text().trim(); //被双击的td单元格里的文本内容
let _w= 100; // $td.width(); //被双击的td单元格的宽度
let _h= 40; // $td.height(); //被双击的td单元格的高度
$td.html(""); //清空被双击的td单元格里的内容
let $input=$("<input type='text' value=''>");//设置一个待添加的input表单
//下面这句是把input表单添加到被双击的单元格里,
//并设置好input表单的宽高,并让其获取焦点,并设置在失去焦点事的动作
$input.appendTo($td).width(_w).height(_h).val(_t).focus().blur(function(){
//失去焦点时,把input的值赋给td单元格
let remark = $(this).val();
let id = $td.parent().data('id');
// ajax 设置备注
$.ajax({
type:'POST',
url:'ajax_set_remark',
data: {id: id,remark:remark},
dataType:'json',
success:function(data){
if(data.errno == 0){
layer.msg(data.errdesc, {icon: 1});
$td.html(remark);
$("#update_time_"+id).html(data.date);
}else{
layer.msg(data.errdesc, {icon: 5});
$td.html(_t);
return false;
}
}
});
});
});
php
/**
* ajax添加备注
*/
public function ajax_set_remark() {
$json = new Json();
$id = $_POST['id'];
$remark = $_POST['remark'];
$women_get = M('women_get');
$flag = $women_get->where(array('id'=>$id))->save(['remark'=>$remark,'update_time'=>time()]);
if($flag || $flag ===0 ){
$json->setErr(0, '操作成功');
$json->setAttr('date', date('Y-m-d H:i'));
$json->Send();
}else{
$json->setErr(10099, '操作失败!!');
$json->Send();
}
}
非常的友好,非常的方便。
jQuery双击编辑td数据的更多相关文章
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- jquery双击事件
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- jquery通过ajax获取数据,控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- Jquery解析Json格式数据
今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- span可编辑 属性 html 可编辑td
<span contenteditable="true">11111111111111111</span> <!DOCTYPE html PUBLIC ...
随机推荐
- AngularJS 表达式 对象和数组
AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...
- iOS手机应用开发原型模板及开发流程
在开始做一个项目的时候,究竟需要准备些什么前期工作呢,在外包公司中,又是一个怎么样的开发步骤呢?下面,按照我的理解,说一下. 项目流程图 看上图,从左往右,如果我们仅是一名开发工程师,只需要关心上图中 ...
- node初识——node中的require方法与require.js的区别
出处:http://blog.csdn.net/u013613428/article/details/51966500 作为一个前端的新手,总是诧异于js的模块载入方式,看到了通过requireJs提 ...
- 使用TreeView加载XML文件
PS: 由于小弟初学编程,本文只写实现方式,代码写的不是很好请见谅! 1.需要读取的xml文档内容 2. 最终实现效果 3 貌似看起实现起来很复杂 但是想想还是挺简单 思路: 读取XML文档 →获 ...
- css+div table
div+css table表格样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Hdu dp
4856 这题说的是给了一个图 这个图有很多的隧道每个隧道是单向的 只能从一个入口进入从另一个入口出来 要求计算出走完这些隧道花的总时间 因为这个图是一个网格行的然后 先用bfs算出隧道的出口到每个隧 ...
- POJ 分类
初期: 一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. ( ...
- ubuntu14.04无法安装Curl,需要先升级sudo apt-get update
ubuntu14.04无法安装Curl,需要先升级sudo apt-get updatesudo apt-get updatesudo apt-get install curl------------ ...
- 教你如何构建异步服务器和客户端的 Kotlin 框架 Ktor
Ktor 是一个使用 Kotlin 以最小的成本快速创建 Web 应用程序的框架. Ktor 是一个用于在连接系统(connected systems)中构建异步服务器和客户端的 Kotlin 框架. ...
- P2322 [HNOI2006]最短母串问题
P2322 [HNOI2006]最短母串问题 AC自动机+bfs 题目要求:在AC自动机建的Trie图上找到一条最短链,包含所有带结尾标记的点 因为n<12,所以我们可以用二进制保存状态:某个带 ...