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;
}