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 相关文章推荐
PHP4实际应用经验篇(5)
Oct 09 PHP
php 正则 过滤html 的超链接
Jun 02 PHP
php强制下载类型的实现代码
Apr 21 PHP
php一个找二层目录的小东东
Aug 02 PHP
php全局变量和类配合使用深刻理解
Jun 05 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
Apr 08 PHP
使用php语句将数据库*.sql文件导入数据库
May 05 PHP
php实现mysql备份恢复分卷处理的方法
Dec 26 PHP
php简单创建zip压缩文件的方法
Apr 30 PHP
php微信开发之上传临时素材
Jun 24 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
Mar 15 PHP
PHP面向对象程序设计继承用法简单示例
Dec 28 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
咖啡与水的关系
2021/03/03 冲泡冲煮
php 删除数组元素
2009/01/16 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python装饰器深入学习
2018/04/06 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python基础教程之异常详解
2019/01/10 Python
Python 多进程原理及实现
2020/12/21 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
幼儿园教师国培感言
2014/02/02 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
初中班干部工作总结
2015/08/10 职场文书