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 ...
随机推荐
- volley6--CacheDispatcher从缓存中获取数据
源码: /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, V ...
- 修改zabbix为中文,并解决乱码问题(三)
当Zabbix安装完成后,默认则是英文界面,有的人看英文不习惯,现在将其改为中文界面 一.修改为中文 1.打开Zabbix界面,Administrator-Users 选择语言-Chinese(zh_ ...
- c# 设计模式 之:抽象工厂
1.作用:抽象工厂的目的就是生产[产品族],之前讲的“工厂模式”的每一个factory只造一种产品,抽象工厂让一个factory造多个产品. uml类图: 代码实现: 抽象工厂代码: namespac ...
- .net core系列之《将.net core应用部署到Ubuntu》
1.首先准备一个演示项目. 2.然后将这个项目用FileZilla工具上传到Ubuntu中. 3.进入目标文件,接下来有两种方法来部署项目 a.用dotnet run命令 root@hhz-virtu ...
- Linux下的Mysql的双向同步
在主从复制的基础上实现双向同步 [更多参考] https://www.cnblogs.com/shuidao/p/3551238.html http://blog.csdn.net/i_bruce/a ...
- 推送代码到GitHub上的两种方式
要想将本地Git上代码提交到GitHub可以使用两种协议进行提交,分别使用HTTPS和SSH两种协议,如下所示. 当使用HTTPS协议时,每次推送的时候都需要输入GitHub平台的用户名密码. ...
- MapReduce Design Patterns(chapter 3 (part 1))(五)
Chapter 3. Filtering Patterns 本章的模式有一个共同点:不会改变原来的记录.这种模式是找到一个数据的子集,或者更小,例如取前十条,或者很大,例如结果去重.这种过滤器模式跟前 ...
- 3.5星|《刷屏:视频时代的风传法则》:YouTube热门视频回顾与分析
刷屏:视频时代的疯传法则 作者2010年加入YouTube.本书是作者对YouTube上的热门视频的回顾与分析.第2-9章各讲一个类别的热门视频:恶搞.混音.网络歌曲.广告.现场目击.知识与科技.小众 ...
- August 03rd 2017 Week 31st Thursday
A person has at least one dream, there is a reason to be strong. 一个人至少要有一个梦想,要有一个理由去坚强. Owning a dre ...
- Excel 导出指定行为txt文件(VBA,宏)
要从Excel 多个sheet内导出指定行为txt文件,懒得用C#了,写个VBA宏 Sub Export() Dim FileName As Variant Dim Sep As String Dim ...