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 相关文章推荐
PHP 和 MySQL 基础教程(二)
Oct 09 PHP
PHP 查找字符串常用函数介绍
Jun 07 PHP
php 解决旧系统 查出所有数据分页的类
Aug 27 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
Nov 07 PHP
php实现统计网站在线人数的方法
May 12 PHP
PHP实现的迷你漂流瓶
Jul 29 PHP
PHP文件下载实例代码浅析
Aug 17 PHP
PHP读MYSQL中文乱码的快速解决方法
Oct 01 PHP
PHP实现执行外部程序的方法详解
Aug 17 PHP
PHP长连接实现与使用方法详解
Feb 11 PHP
thinkPHP框架实现的简单计算器示例
Dec 07 PHP
使用ucenter实现多站点同步登录的讲解
Mar 21 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类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python的多态性实例分析
2015/07/07 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
外企测试工程师面试题
2015/02/01 面试题
关于元旦的广播稿
2014/02/16 职场文书
大一新生期末自我评价
2014/09/12 职场文书
学习十八大宣传标语
2014/10/09 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
志愿者工作心得体会
2016/01/15 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS