即點即改
阿新 • • 發佈：2018-11-09
雙擊單元格時獲取單元中的欄位、值和id，將單元格替換成input框，再利用失焦事件獲取新值替換舊值，利用ajax方式將獲取的欄位、id和新值傳到控制器，進行拼接，實現修改。
<?php namespace app\index\controller; use think\Controller; use think\Db; use think\Request; class Update extends Controller { //展示資料 public function show(){ $data = Db::table('yun')->select(); return view("show",['data'=>$data]); } //執行修改 public function update(){ $fd = Request::instance()->param('fd'); $v = Request::instance()->param('v'); $id = Request::instance()->param('id'); $data[$fd]=$v; $a = Db::table('yun')->where('id',$id)->update($data); if($a){ return 0; }else{ return 1; } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展示資料</title> </head> <body> <center> <table border="1"> <tr> <td>ID</td> <td>姓名</td> <td>年齡</td> <td>地址</td> </tr> {volist name="data" id="vo"} <tr class="{$vo.id}" id="{$vo.id}"> <td >{$vo.id}</td> <td fd="name">{$vo.name}</td> <td fd="age">{$vo.age}</td> <td fd="address">{$vo.address}</td> </tr> {/volist} </table> </center> </body> </html> <script src="/static/js/jquery.js"></script> <script> $("td").dblclick(function(){ //獲取td中的值 var td_val=$(this).html(); //獲取雙擊過的欄位 var fd_val=$(this).attr('fd'); //獲取id var id_val=$(this).parents("tr").attr("id"); //將td框變成input框 $(this).html("<input type='text' value='"+td_val+"' id='fj'>"); $("#fj").blur(function(){ //獲取要修改的值 var new_val = $(this).val(); $(this).parents("td").html(new_val); $.ajax({ method:"POST", url:"{:url('update/update')}", data:{ id:id_val, fd:fd_val, v:new_val } }).done(function(msg){ if(msg==0){ alert("修改成功"); }else{ alert("修改失敗"); } }); }); }); </script>