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 编程请选择正确的文本编辑软件
Dec 21 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
May 18 PHP
二招解决php乱码问题
Mar 25 PHP
利用php获取服务器时间的实现代码
Jun 07 PHP
php使用curl检测网页是否被百度收录的示例分享
Jan 31 PHP
PHP中exec函数和shell_exec函数的区别
Aug 20 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
Oct 31 PHP
php实现简单的语法高亮函数实例分析
Apr 27 PHP
浅谈php中include文件变量作用域
Jun 18 PHP
分享PHP守护进程类
Dec 30 PHP
thinkPHP5.0框架简单配置作用域的方法
Mar 17 PHP
php数组遍历类与用法示例
May 24 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
综合图片计数器
2006/10/09 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
一个超级简单的python web程序
2014/09/11 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
django celery redis使用具体实践
2019/04/08 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
新年主持词
2014/03/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
校友会致辞
2015/07/30 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python