PHP+jQuery实现双击修改table表格
程序员文章站
2022-03-18 15:40:04
//双击触发事件 $("tbody>tr>td").dblclick(function(){ //获取到 当前 input 下的元素(原值) window.olds = $(this).children('input').val(); if(olds==undefined) { r... ......
<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;
}
上一篇: Javascript 智能输入数字且保留小数点后三位
下一篇: 浅谈Git分支管理策略
推荐阅读
-
table表格实现行、列冻结 博客分类: javascript前台效果 表格行列冻结
-
基于el-table的树形表格及js-xlsx实现下载excel功能(二)
-
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!
-
php通过ajax实现双击table修改内容_PHP教程
-
jQuery实现table表格checkbox全选的方法分析
-
php通过ajax实现双击table修改内容
-
php通过ajax实现双击table修改内容
-
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!
-
Asp.Net实现无限分类生成表格的方法(后台自定义输出table)
-
Asp.Net实现无限分类生成表格的方法(后台自定义输出table)