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 相关文章推荐
Windows下XDebug 手工配置与使用说明
Jul 11 PHP
作为PHP程序员应该了解MongoDB的五件事
Jun 03 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
Jun 20 PHP
浅析PHP的ASCII码转换类
Jul 05 PHP
PHP实现Soap通讯的方法
Nov 03 PHP
php实现获取文件mime类型的方法
Feb 11 PHP
php检测apache mod_rewrite模块是否安装的方法
Mar 14 PHP
Windows下php+mysql5.7配置教程
May 16 PHP
浅析PHP类的反射来实现依赖注入过程
Feb 06 PHP
php实现小程序支付完整版
Oct 09 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
Feb 08 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
Oct 02 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用header函数实现301跳转代码实例
2013/11/25 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python实现的矩阵类实例
2017/08/22 Python
Python实现句子翻译功能
2017/11/14 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
索桥的故事教学反思
2014/02/06 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
慰问信模板
2015/02/14 职场文书
员工辞职信范文大全
2015/05/12 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
班级管理经验交流材料
2015/11/02 职场文书
高一作文之乐趣
2019/11/21 职场文书