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 ...
随机推荐
- Linux时间同步+国内常用的NTP服务器地址
当Linux服务需要时间戳的时候,时间同步就显得十分重要.这里介绍下,最近我使用的一个同步命令. # ntpdate s1a.time.edu.cn 国内常用的NTP地址 210.72.145.44 ...
- Spring面试 IOC和AOP的理解
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...
- 搭建高可用mongodb集群(一)——配置mongodb
在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...
- Newtonsoft.Json 动态解析 json字符串
有一个json字符串是动态的,如下面,columns中的数量是不固定的,因此就不能使用反序列化类的方法了: 因此使用这样一种方式,把columns中的所有东西都输出出来: public void Ge ...
- exchange 2010 邮件服务器owa证书更新
exchange 2010应用环境 四台前端服务器,两台位于DMZ区,两台位于办公网环境,办公网和DMZ的服务器做了NLB负载均衡,操作系统为windows server 2008 r2. 目前前端h ...
- 原生ajax和jsonp
封装方法: function ajax(options) { options = options || {}; options.type = (options.type || "GET&qu ...
- XML序列化 System.Xml.Serialization
一.定义元数据 XML序列化常用属性:XMLRoot,XMlType.XMLText.XMLEnum等 [Serializable] [XmlRoot] public class Product { ...
- mac使用指南--软件安装部分
最近因为开发需要,换了个mac,发现和Windows下面的操作和习惯真是千差万别啊,在这里记录一下,有需要的也可以参考一下. 安装前强烈建议根据个人习惯设置好触控板!!!什么单击双击选中拖拽的统统设好 ...
- [枫叶学院] Unity3d高级开发教程 工具集(一) 哈希列表——强大的自己定义数据集
在日常开发中.数据集合是我们不可缺少的重要工具之中的一个.在C#中,.Net Framework也为我们提供了种类繁多,功能多样的数据集工具.在此,我基于List<T> 和 HashTab ...
- [HNOI2010]公交线路
题目 发现\(n\)比较大,但是\(k,p\)都很小,考虑矩乘使得复杂度倾斜一下 发现所有车的最大间隔都是\(p\),还保证\(k<p\),于是我们可以考虑压下最后\(p\)位的情况 于是设\( ...