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数据的更多相关文章

  1. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  2. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  3. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  4. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  5. jquery通过ajax获取数据,控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  6. Jquery解析Json格式数据

    今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...

  7. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...

  8. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  9. span可编辑 属性 html 可编辑td

    <span contenteditable="true">11111111111111111</span> <!DOCTYPE html PUBLIC ...

随机推荐

  1. AngularJS 表达式 对象和数组

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  2. iOS手机应用开发原型模板及开发流程

    在开始做一个项目的时候,究竟需要准备些什么前期工作呢,在外包公司中,又是一个怎么样的开发步骤呢?下面,按照我的理解,说一下. 项目流程图 看上图,从左往右,如果我们仅是一名开发工程师,只需要关心上图中 ...

  3. node初识——node中的require方法与require.js的区别

    出处:http://blog.csdn.net/u013613428/article/details/51966500 作为一个前端的新手,总是诧异于js的模块载入方式,看到了通过requireJs提 ...

  4. 使用TreeView加载XML文件

    PS: 由于小弟初学编程,本文只写实现方式,代码写的不是很好请见谅! 1.需要读取的xml文档内容 2. 最终实现效果 3  貌似看起实现起来很复杂 但是想想还是挺简单 思路:  读取XML文档 →获 ...

  5. css+div table

    div+css table表格样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. Hdu dp

    4856 这题说的是给了一个图 这个图有很多的隧道每个隧道是单向的 只能从一个入口进入从另一个入口出来 要求计算出走完这些隧道花的总时间 因为这个图是一个网格行的然后 先用bfs算出隧道的出口到每个隧 ...

  7. POJ 分类

    初期: 一.基本算法:      (1)枚举. (poj1753,poj2965)      (2)贪心(poj1328,poj2109,poj2586)      (3)递归和分治法.      ( ...

  8. ubuntu14.04无法安装Curl,需要先升级sudo apt-get update

    ubuntu14.04无法安装Curl,需要先升级sudo apt-get updatesudo apt-get updatesudo apt-get install curl------------ ...

  9. 教你如何构建异步服务器和客户端的 Kotlin 框架 Ktor

    Ktor 是一个使用 Kotlin 以最小的成本快速创建 Web 应用程序的框架. Ktor 是一个用于在连接系统(connected systems)中构建异步服务器和客户端的 Kotlin 框架. ...

  10. P2322 [HNOI2006]最短母串问题

    P2322 [HNOI2006]最短母串问题 AC自动机+bfs 题目要求:在AC自动机建的Trie图上找到一条最短链,包含所有带结尾标记的点 因为n<12,所以我们可以用二进制保存状态:某个带 ...