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程序中的常见漏洞进行攻击
Oct 09 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
Jul 03 PHP
Ajax+PHP快速上手及简单应用说明
Jul 24 PHP
PHP四大安全策略
Mar 12 PHP
PHP多线程之内部多线程实例分析
Mar 09 PHP
PHP抽奖算法程序代码分享
Oct 08 PHP
PHP中模拟链表和链表的基本操作示例
Feb 27 PHP
PHP错误机制知识汇总
Mar 24 PHP
PHP redis实现超迷你全文检索
Mar 04 PHP
PHP实现获取第一个中文首字母并进行排序的方法
May 09 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
Oct 12 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
Dec 01 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实现基于PDO的预处理示例
2017/03/28 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
vue系列之动态路由详解【原创】
2017/09/10 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
js实现一个简易计算器
2020/03/30 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python批量启动多线程代码实例
2020/02/18 Python
python 星号(*)的多种用途
2020/09/21 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
九年级物理教学反思
2014/01/29 职场文书
小学生手册家长评语
2014/04/16 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
企业百日安全活动总结
2015/05/07 职场文书
运动会通讯稿600字
2015/07/20 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js