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 相关文章推荐
不用mod_rewrite直接用php实现伪静态化页面代码
Oct 04 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
Mar 10 PHP
PHP遍历二维数组的代码
Apr 22 PHP
PHP+Mysql+jQuery实现动态展示信息
Oct 08 PHP
php地址引用(php地址引用的效率问题)
Mar 23 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
Apr 22 PHP
php自定义session示例分享
Apr 22 PHP
destoon之一键登录设置
Jun 21 PHP
PHP基于递归算法解决兔子生兔子问题
May 11 PHP
ThinkPHP框架实现FTP图片上传功能示例
Apr 08 PHP
PHP获取远程http或ftp文件的md5值的方法
Apr 15 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
Oct 03 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
substr()函数中文版
2006/10/09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
页面使用密码保护代码
2013/04/10 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python模拟Django框架实例
2016/05/17 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
NFL官方在线商店:NFLShop
2020/07/29 全球购物
支部书记四风对照材料
2014/08/28 职场文书
关于幸福的感言
2015/08/03 职场文书
高三物理教学反思
2016/02/20 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA