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正确解析UTF-8字符串技巧应用
Nov 07 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
Jun 19 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
Jul 18 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
Oct 27 PHP
php调用mysql存储过程实例分析
Dec 29 PHP
PHP中new static() 和 new self() 的区别介绍
Jan 09 PHP
PHP使用PHPexcel导入导出数据的方法
Nov 14 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
Jul 06 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
Oct 08 PHP
thinkPHP数据库增删改查操作方法实例详解
Dec 06 PHP
php使用变量动态创建类的对象用法示例
Feb 06 PHP
PHP实现统计代码行数小工具
Sep 19 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中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
js实现简单点赞操作
2020/03/17 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
日语专业个人的求职信
2013/12/03 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
开天辟地观后感
2015/06/09 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL