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 ...
随机推荐
- 【转】使用expect实现shell自动交互
原文地址:http://www.nginx.cn/1934.html shell脚本需要交互的地方可以使用here文档是实现,但是有些命令却需要用户手动去就交互如passwd.scp 对自动部署免去用 ...
- Java和C# RSA加解密相互通信和使用公钥加密传输
关于JAVA和C#加解密通讯的话,可以用这个BouncyCastle插件,会帮助你解决很多问题 http://www.bouncycastle.org/ //c#使用java给的公钥进行rsa加密 p ...
- Gitlab installtation
环境:Centos7 安装配置(安装开启http和sshd): 1 yum -y install curl openssh-server postfix 2 systemctl enable sshd ...
- zabbix启动报错:Connection to database 'xxx' failed解决方法
Zabbix 分布式系统监视系统 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通 ...
- 关于Angular中时间戳的计算
前言 使用的是Moment.js 插件,插件的安装详情请参考官方网址(https://momentjs.com/) 正文 步骤一:引用import * as moment from 'moment'; ...
- C# 冒泡排序法、插入排序法、选择排序法
冒泡排序法 是数组等线性排列的数字从大到小或从小到大排序. 以从小到大排序为例. 数据 11, 35, 39, 30, 7, 36, 22, 13, 1, 38, 26, 18, 12, 5, 45, ...
- 激活老电脑的第二春:内存盘为Chrome浏览器做缓存
AMD Radeon RAMDisk 4.2.1 正式版 下载地址:http://dl.pconline.com.cn/html_2/1/73/id=7204&pn=0.html 适用于:wi ...
- c++计算器后续(1)
自娱自乐: 大概是一直在说的代码规范,大概是玩一玩,以上. 代码规范: 参考原文:链接 相关节选: 4 程序的版式 4.4规则:较长的语句(>80字符)要分成多行书写. 4.5规则:不允许把多个 ...
- 离散对数&&大步小步算法及扩展
bsgs algorithm ax≡b(mod n) 大步小步算法,这个算法有一定的局限性,只有当gcd(a,m)=1时才可以用 原理 此处讨论n为素数的时候. ax≡b(mod n)(n为素数) 由 ...
- Tableau10.4中智能显示点击后消失的解决方案
如果你的电脑是Win10,并且是高分屏,可能会出现和我一样的问题,就点击智能显示后,发现找不到了. 那么解决方案就是: 这样就能找到智能显示了.