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&amp;mysql(四)
Oct 09 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
Apr 24 PHP
php微信支付之APP支付方法
Mar 04 PHP
PHP实现简单数字分页效果
Jul 26 PHP
WordPress分页伪静态加html后缀
Jun 08 PHP
学习PHP session的传递方式
Jun 15 PHP
PHP的AES加密算法完整实例
Jul 20 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
Jul 28 PHP
微信公众号开发之通过接口删除菜单
Feb 20 PHP
PHP redis实现超迷你全文检索
Mar 04 PHP
PHP实现简单计算器小程序
Aug 28 PHP
Yii2.0框架模型多表关联查询示例
Jul 18 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python实现完整的事务操作示例
2017/06/20 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python subprocess模块详细解读
2018/01/29 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
高一化学教学反思
2014/02/05 职场文书
个人贷款担保书
2014/04/01 职场文书
新闻编辑求职信
2014/07/13 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
收银员岗位职责范本
2015/04/07 职场文书
交通事故代理词范文
2015/05/23 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript