PHP+jQuery实现双击修改table表格
<td signs="name">
<input type="text" disabled="disabled" readonly="readonly" value="{$res.section}" >
</td>
//双击触发事件
$("tbody>tr>td").dblclick(function(){
//获取到 当前 input 下的元素(原值)
window.olds = $(this).children('input').val();
if(olds==undefined)
{
return false;
}
var signs = $(this).attr('signs'); //获取属性值(这些值方便php后台的操作)
// console.log(signs);
var user_id = $(this).parent().attr("id"); //接受当前点击的ID(tr里的id)
// console.log(user_id);
//双击之后可以修改
$(this).find('input').attr("disabled",false);
$(this).find('input').attr("readonly",false);
$(this).find('input').css("border",'1px solid deepskyblue');
$(this).find('input').attr('id', signs + "_" + user_id); //方便下面失去焦点事件 找ID(没有这个无法定位到tr里面的id属性)
//循环这些值从而判断是修改数据的类型,对一些特殊类型的数据进行特殊处理
switch(signs){
case 'name':
$("#" + signs + "_" + user_id).focus().on("blur",function(){
var content = $(this).val();
// console.log(content);
if(content!=olds) //与原值不同则传到后台
{
// alert(user_id);alert(signs);alert(content);
/*
通过getJSON将数据传输到后台
USER_ID
SIGNS
CONTENT
*/
$.ajax({
type:"post", // 请求类型
url:"{:url('Sections/update')}", // 请求URL
data:{id:user_id,val:content}, // 请求参数 即是 在Servlet中 request.getParement();可以得到的字符串
dataType:"json", // 数据返回类型
cache:false, // 是否缓存
async:true, // 默认为true 异步请求
success:function(result){ // 成功返回的结果(响应)
console.info(result);
if(result){
// alert('22213');
}else{
// alert('1111');
}
}
});
}
$(this).attr('disabled', 'disabled');
$(this).attr('readonly', 'readonly');
$(this).css('border', '0');
$(this).css('background', '#fff');
$(this).css('text-align', 'center');
});
break;
}
})
public function update()
{
$datas=input('post.');
$id = $datas['id'];
$name = $datas['val'];
$res = $this->section->updates($datas);
echo json_encode($res); }
/**
* 修改
*/
public function updates($data)
{ $Section = new Section;
$res = $Section->save([
'section' => $data['val'],
],['id' => $data['id']]); return $res;
}
PHP+jQuery实现双击修改table表格的更多相关文章
- 使用JQuery双击修改Table中Td
<html> <head> <meta http-equiv="Content-Type" content="text/html;chars ...
- JQuery结合Ajax实现双击Table表格,使Table变成可编辑,并保存到数据库中
本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- jquery 双击修改某项值
双击修改某项值 $(function() { $('td.breakword').dblclick(function(){ $(this).addClass('input').html('<in ...
- jquery 生成table表格 部分代码
想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...
- 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 ...
随机推荐
- WinAPI: WinExec - 运行外部程序
原文:http://www.cnblogs.com/del/archive/2008/02/13/1067871.html //声明 WinExec( lpCmdLine: LPCSTR; {文件 ...
- SSM 框架-05-详细整合教程(Eclipse版)(Spring+SpringMVC+MyBatis)
SSM 框架-05-详细整合教程(Eclipse版)(Spring+SpringMVC+MyBatis) 如果你使用的是 Intellij IDEA,请查看: SSM的配置流程详细的写了出来,方便很少 ...
- Android链接蓝牙电子称
蓝牙一直是我内心屏蔽的一个模块哈哈哈哈!然而今天我不得不正视它了,我百度了看了好多因为需要设备匹配所以设备不在没办法测试,几天之后设备到了.因为没有接触过,看到返回的打印出来的菱形方块就以为是错了.于 ...
- 理解JMeter聚合报告(Aggregate Report)
Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”.今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下,以备大家查阅. 如果 ...
- Python3 中日语料分句实现
0. 背景 因为最近在看平行语料句对齐.词对齐的缘故,想做对齐的话需要先做一个分句. 一开始利用正则和引号开关标志写了一种方法,中间想到一个小技巧,写出来比较简单通用,想把这一小段代码分享一下. 1. ...
- Google 嘘! 嘘!
https://www.gufen.gq(无广告,原guso.ml,ggso.ga,guge.ga) https://c.aiguso.tk (无广告,体验良好) https://d.freedo.g ...
- N点虚拟主机管理系统如何使用?
有朋友问起N点虚拟主机管理系统怎么用呢?下面大概整理下他的使用方法,咱们来看看吧. 在讲如何使用N点虚拟主机管理系统之前,我们先来了解一下N点虚拟主机管理系统的介绍. N ...
- windows 下 gdb 的安装
在 windows 下 gcc/g++ 的安装 这篇文章中已经提到,用MinGW Installation Manager可以方便地管理 MinGW 组件,因此使用该软件安装 gdb . 打开 Min ...
- 设计模式(16) 观察者模式(OBSERVER)C++实现
意图: 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 动机: 将一个系统设计成一系列相互协作的类有一个常见的副作用:需要维护相关对象之间的一 ...
- Python学习---迭代器学习1210
可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的generator fun ...