PHP+jQuery实现即点即改功能示例


Posted in PHP onFebruary 21, 2019

本文实例讲述了PHP+jQuery实现即点即改功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>即点即改</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<?php
$con = array(
  array("id"=>1,"姓名"=>"张三","性别"=>"女"),
  array("id"=>2,"姓名"=>"李四","性别"=>"男"),
  array("id"=>3,"姓名"=>"王五","性别"=>"男"));
 // print_r($con);die;
?>
  <table align="center" border="1">
  <?php foreach ($con as $key => $v): ?>
    <tr pid="<?= $v['id'];?>">
      <td><span class="up" style="cursor:pointer;"><?= $v['姓名'];?></span></td>
      <td><?= $v['性别'];?></td>
    </tr>
  <?php endforeach; ?>
  </table>
</body>
</html>
<script>
  //即点即改
  $(document).on("click",".up",function(){
    var content = $(this).text(); //获取到当前点击对象的值
    var pid = $(this).parents("tr").attr('pid');  //通过attr 获取到设置的属性(pid)
    //当点击修改文字时 变成文本框并且获取到原值(content)
    $(this).parent().html("<input type='text' class='fo' value='" + content + "'/>");
    $(".fo").focus(); //光标
    $(".fo").blur(function(){
      //获取到修改后的值
      var val = $(".fo").val();
      //
      /*
      将所有修改信息传到后端
       */
      $(this).parent().html("<span class='up' style='cursor:pointer;'>"+val+"</span>");
    })
  })
</script>

运行结果:

PHP+jQuery实现即点即改功能示例

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
来自phpguru得Php Cache类源码
Apr 15 PHP
备份mysql数据库的php代码(一个表一个文件)
May 28 PHP
php中用foreach来操作数组的代码
Jul 17 PHP
PHP 图片上传代码
Sep 13 PHP
php中配置文件操作 如config.php文件的读取修改等操作
Jul 07 PHP
浅谈COOKIE和SESSION区别
Jul 19 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
Jan 11 PHP
PHP的Yii框架中过滤器相关的使用总结
Mar 29 PHP
PHP基于cookie实现统计在线人数功能示例
Jan 16 PHP
总结PHP中初始化空数组的最佳方法
Feb 13 PHP
php上传后台无法收到数据解决方法
Oct 28 PHP
php回调函数处理数组操作示例
Apr 13 PHP
PHP hebrev()函数用法讲解
Feb 21 #PHP
Yii2.0框架实现带分页的多条件搜索功能示例
Feb 20 #PHP
PHP获取访问设备信息的方法示例
Feb 20 #PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
Feb 20 #PHP
PHP调用全国天气预报数据接口查询天气示例
Feb 20 #PHP
Laravel框架FormRequest中重写错误处理的方法
Feb 18 #PHP
php原生数据库分页的代码实例
Feb 18 #PHP
You might like
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python的socket编程入门
2018/01/29 Python
python实现Decorator模式实例代码
2018/02/09 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Django REST 异常处理详解
2020/07/15 Python
土木工程个人自荐信范文
2013/11/30 职场文书
机房搬迁方案
2014/05/01 职场文书
文言文辞职信
2015/02/28 职场文书
升学宴来宾致辞
2015/07/27 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
Python基础之元类详解
2021/04/29 Python