HTML页面：
<!doctype html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport"
?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<title>Document</title>
</head>
<body>
<center>
???<table>
???????<tr>
???????????<td><input type="checkbox"></td>
???????????<td>位置</td>
???????????<td>房源</td>
???????????<td>房源面积</td>
???????????<td>计租面积</td>
???????????<td>户型</td>
???????????<td>建筑结构</td>
???????????<td>租赁性质</td>
???????????<td>状态</td>
???????????{switch name="$list.u_name"}
???????????{case value="root"} ??<td>操作</td>{/case}
???????????{case value="admin"}{/case}
???????????{/switch}
???????</tr>
???????<tbody class="tby">
???????{volist name="list.data" id="v"}
???????<tr id="{$v.f_id}">
???????????<td><input type="checkbox" class="box"></td>
???????????<td>{$v.f_wei}</td>
???????????{switch name="$list.u_name"}
???????????{case value="root"} <td class="ww" fd="f_name">{$v.f_name}</td>{/case}
???????????{case value="admin"}<td >{$v.f_name}</td>{/case}
???????????{/switch}
???????????<td>{$v.f_mian}</td>
???????????<td>{$v.f_ji}</td>
???????????<td>{$v.f_hu}</td>
???????????<td>{$v.f_jian}</td>
???????????<td>{$v.f_zu}</td>
???????????<td>{$v.f_static}</td>
??????????{switch name="$list.u_name"}
???????????????{case value="root"} ?<td><a href="javascript:void(0);" class="shan">删除</a></td>{/case}
???????????????{case value="admin"}{/case}
???????????{/switch}
???????</tr>
???????{/volist}
???????</tbody>
???????<input type="hidden" value="1" class="shou_page">
???????<input type="hidden" value="{$list.zong_page}" class="wei_page">
???</table>
???<button class="pre">首页</button>
???<button class="pre">上一页</button>
???<button class="pre">下一页</button>
???<button class="pre">尾页</button>
</center>
<script src="__STATIC__/js/jquery.min.js"></script>
<script>
???//即点即改
???$(document).on("dblclick",".ww",function () {
???????var fd_val=$(this).attr("fd");
???????var html_val=$(this).text();
???????var id=$(this).parents("tr").attr("id");
???????//替换
???????$(this).html(‘<input type="text" id="‘+fd_val+html_val+‘" value="‘+html_val+‘">‘)
???????$("#"+fd_val+html_val).blur(function () {
???????????var new_val=$(this).val();
???????????$(this).parents("td").text(new_val);
???????????//请求
???????????$.post(
???????????????"{:url(‘access/ji_gai‘)}",
???????????????{
???????????????????id:id,
???????????????????new_val:new_val,
???????????????????fd_val:fd_val
???????????????},
???????????????function (data) {
???????????????}
???????????)
???????})
???})
???//分页
???$(document).on("click",".pre",function () {
???????var pre=$(this).text();
???????var shou_page=$(".shou_page").val();
???????var wei_page=$(".wei_page").val();
???????var p="";
???????if(pre=="首页")
???????{
???????????p=1;
???????}else if(pre=="上一页")
???????{
???????????p=parseInt(shou_page)-1<1?1:parseInt(shou_page)-1;
???????}else if(pre=="下一页")
???????{
???????????p=parseInt(shou_page)+1>wei_page?wei_page:parseInt(shou_page)+1;
???????}else if(pre=="尾页")
???????{
???????????p=wei_page;
???????}
???????//请求
???????$.post(
???????????"{:url(‘access/show_json‘)}",
???????????{
???????????????page:p
???????????},
???????????function (data) {
???????????????var res=JSON.parse(data)
???????????????var res_list=res.data
???????????????var name=res.u_name
???????????????if(name=="root")
???????????????{
???????????????????var aa=‘ <td><a href="javascript:void(0);" class="shan">删除</a></td>‘;
???????????????????var bb=‘class="ww" fd="f_name"‘;
???????????????}
???????????????var str="";
???????????????$.each(res_list,function (k, v) {
???????????????????str+=‘<tr id="‘+v.f_id+‘">‘;
???????????????????str+=‘<td><input type="checkbox" class="box"></td>‘
???????????????????str+=‘<td>‘+v.f_wei+‘</td>‘
???????????????????str+=‘<td ‘+bb+‘>‘+v.f_name+‘</td>‘
???????????????????str+=‘<td>‘+v.f_mian+‘</td>‘
???????????????????str+=‘<td>‘+v.f_ji+‘</td>‘
???????????????????str+=‘<td>‘+v.f_hu+‘</td>‘
???????????????????str+=‘<td>‘+v.f_jian+‘</td>‘
???????????????????str+=‘<td>‘+v.f_zu+‘</td>‘
???????????????????str+=‘<td>‘+v.f_static+‘</td>‘
???????????????????str+=‘‘+aa+‘‘;
???????????????????str+=‘</tr>‘;
???????????????})
???????????????$(".tby").html(str)
???????????????$(".shou_page").val(p)
???????????}
???????)
???})
???//删除
???$(document).on("click",".shan",function () {
???????var id=$(this).parents("tr").attr("id");
???????//请求
???????$.post(
???????????"{:url(‘access/dan_del‘)}",
???????????{
???????????????id:id
???????????},
???????????function (data) {
???????????????var re=JSON.parse(data)
???????????????if(re==1)
???????????????{
???????????????????alert("单删成功")
???????????????????document.getElementById(id).remove();
???????????????}else if(re==2)
???????????????{
???????????????????alert("单删失败")
???????????????}
???????????}
???????)
???})
</script>
</body>
</html>
PHP页面：
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Request;
use think\Session;
use app\index\model\Fang_yuan;
use app\index\controller\Commen;
class Access extends Commen
{
???//页面分页展示
???public function fang_list()
???{
???????$user=Session::get("user",‘think‘);
???????$u_name=$user[‘u_name‘];
??????$p=Request::instance()->param("page");
??????$page=empty($p)?1:$p;
??????$count=Db::table("fang_yuan")->count();
??????$tiao=3;
??????$zong_page=ceil($count/$tiao);
??????$limit=($page-1)*$tiao;
??????$data=Db::table("fang_yuan")->limit($limit,$tiao)->select();
??????$list=[‘data‘=>$data,‘zong_page‘=>$zong_page,‘u_name‘=>$u_name];
??????return view("show",[‘list‘=>$list]);
???}
???//分页的json格式
???public function show_json()
???{
???????$user=Session::get("user",‘think‘);
???????$u_name=$user[‘u_name‘];
???????$p=Request::instance()->param("page");
???????$page=empty($p)?1:$p;
???????$count=Db::table("fang_yuan")->count();
???????$tiao=3;
???????$zong_page=ceil($count/$tiao);
???????$limit=($page-1)*$tiao;
???????$data=Db::table("fang_yuan")->limit($limit,$tiao)->select();
???????$list=[‘data‘=>$data,‘zong_page‘=>$zong_page,‘u_name‘=>$u_name];
???????echo json_encode($list);
???}
???//单删
???public function dan_del()
???{
???????$id=Request::instance()->param("id");
???????$aa=new Fang_yuan();
???????$a=$aa->del($id);
???????if($a)
???????{
??????????echo ?json_encode(1);
???????}else{
???????????echo json_encode(2);
???????}
???}
???//即点即改
???public function ji_gai()
???{
???????$id=Request::instance()->param("id");
???????$new_val=Request::instance()->param("new_val");
???????$fd_val=Request::instance()->param("fd_val");
???????$a=Db::table("fang_yuan")->where("f_id=‘$id‘")->update(["$fd_val"=>"$new_val"]);
???????if($a)
???????{
???????????return 1;
???????}else{
???????????return 2;
???????}
???}
}
TP5中即点即改，json分页，单删
原文地址：https://www.cnblogs.com/stj123/p/9787388.html