show.php代码页面
<meta charset="UTF-8"><?php//链接数据库$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mfour‘);//设置字符集mysqli_query($link,‘set names utf8‘);//拼接sql$sql = "select * from USER ";//执行$res = mysqli_query($link,$sql);//循环成一个数组while($a = mysqli_fetch_assoc($res)){ ???$data[] = $a;}?><table border="1"> ???<tr> ???????<th>ID</th> ???????<th>姓名</th> ???????<th>密码</th> ???????<th>手机</th> ???????<th>地址</th> ???</tr> ???<?php foreach ($data as $kk => $v) { ?> ???<tr id="<?php echo $v[‘id‘]?>"> ???????<td fd="id"><?php echo $v[‘id‘]?></td> ???????<td fd="name"><?php echo $v[‘name‘]?></td> ???????<td fd="pwd"><?php echo $v[‘pwd‘]?></td> ???????<td fd="phone"><?php echo $v[‘phone‘]?></td> ???????<td fd="area"><?php echo $v[‘area‘]?></td> ???</tr> ???<?php } ?></table><script src="jquery.js"></script><script> ???// ?html() ?括号里面不写东西就是取值,写了东西就是替换 ???// ?attr ?表示的是属性 ???$(document).ready(function () { ???????//双击定位到某一个td标签 ???????$("td").dblclick(function () { ???????????//获取td标签的内容 ???????????var td_val = $(this).html(); ???????????//获取td的属性值 ???????????var fd_val = $(this).attr(‘fd‘); ???????????//获取tr的属性值 ???????????var tr_val = $(this).parents().attr(‘id‘); ???????????//替换 ???????????$(this).html("<input type=‘text‘ id=‘"+td_val+fd_val+"‘ value=‘"+td_val+"‘>"); ???????????//获取文本框的内容 ???????????$("#"+td_val+fd_val).blur(function () { ???????????????var new_val = $(this).val(); ???????????????$(this).parents("td").html(new_val); ???????????????//请求 ???????????????$.post("insert.php", ???????????????????{ ???????????????????????id:tr_val, ?//id的值 ???????????????????????fd:fd_val, ?//字段的名字 ???????????????????????v:new_val ??//字段的值 ???????????????????}, ???????????????????function(data,status){ ???????????????????}); ???????????}) ???????}) ???});</script>
php处理数据页面:insert.php
<?php//接收值$id = $_POST[‘id‘];$fd = $_POST[‘fd‘];$v = $_POST[‘v‘];//链接数据库$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mfour‘);//设置字符集mysqli_query($link,‘set names utf8‘);//拼接sql$sql = "update user set $fd=‘$v‘ WHERE id=$id";//执行mysqli_query($link,$sql);
jquery即点即改+php原生代码展示
原文地址:https://www.cnblogs.com/hopelooking/p/9186741.html