PHP+jQuery实现双击修改table表格功能示例


Posted in PHP onFebruary 21, 2019

本文实例讲述了PHP+jQuery实现双击修改table表格功能。分享给大家供大家参考,具体如下:

<!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 id="<?= $v['id'];?>">
      <td signs="user_name" style="width:100px">
        <input style="border:0; text-align: center; width:60px; background: #fff;"
        type="text" disabled="disabled" readonly="readonly" value="<?= $v['姓名'];?>" >
      </td>
      <td signs="user_sex" style="width:100px">
        <input style="border:0; text-align: center; width:60px; background: #fff;"
        type="text" disabled="disabled" readonly="readonly" value="<?= $v['性别'];?>" >
      </td>
    </tr>
  <?php endforeach; ?>
  </table>
</body>
</html>
<script>
  //双击触发事件
  $("tbody>tr>td").dblclick(function(){
    //获取到 当前 input 下的元素(原值)
    window.olds = $(this).children('input').val();
    if(olds==undefined)
    {
      return false;
    }
    var signs = $(this).attr('signs'); //获取属性值(这些值方便php后台的操作)
    var user_id = $(this).parent().attr("id"); //接受当前点击的ID(tr里的id)
    //双击之后可以修改
    $(this).find('input').attr("disabled",false);
    $(this).find('input').attr("readonly",false);
    $(this).find('input').css("border",'1px solid deepskyblue');
    $(this).find('input').attr('id', signs + "_" + user_id);  //方便下面失去焦点事件 找ID(没有这个无法定位到tr里面的id属性)
    //循环这些值从而判断是修改数据的类型,对一些特殊类型的数据进行特殊处理
    switch(signs){
      case 'user_name':
       $("#" + signs + "_" + user_id).focus().on("blur",function(){
         var content = $(this).val();
         if(content!=olds)  //与原值不同则传到后台
         {
           // alert(user_id);alert(signs);alert(content);
           /*
           通过getJSON将数据传输到后台
           USER_ID
           SIGNS
           CONTENT
           */
         }
         $(this).attr('disabled', 'disabled');
        $(this).attr('readonly', 'readonly');
        $(this).css('border', '0');
        $(this).css('background', '#fff');
        $(this).css('text-align', 'center');
       })
      break;
      case 'user_sex':
       $("#" + signs + "_" + user_id).focus().on("blur",function(){
         var content = $(this).val();
         if(content!=olds)
         {
           // alert(user_id);
         }
         $(this).attr('disabled', 'disabled');
        $(this).attr('readonly', 'readonly');
        $(this).css('border', '0');
        $(this).css('background', '#fff');
        $(this).css('text-align', 'center');
       })
    }
  })
</script>

运行效果如下:

PHP+jQuery实现双击修改table表格功能示例

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
php实现的短网址算法分享
Jun 20 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
Jul 15 PHP
PHP屏蔽过滤指定关键字的方法
Nov 03 PHP
PHP处理postfix邮件内容的方法
Jun 16 PHP
PHP错误Warning:mysql_query()解决方法
Oct 24 PHP
必须收藏的23个php实用代码片段
Feb 02 PHP
浅析Yii2中GridView常见操作
Apr 22 PHP
PHP结合Ueditor并修改图片上传路径
Oct 16 PHP
深入浅析PHP的session反序列化漏洞问题
Jun 15 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
Jun 13 PHP
PHP后台实现微信小程序登录
Aug 03 PHP
php7 错误处理机制修改实例分析
May 25 PHP
PHP+jQuery实现即点即改功能示例
Feb 21 #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
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php创建多级目录的方法
2015/03/24 PHP
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jstree的简单实例
2016/12/01 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
详解vue 命名视图
2019/08/14 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
简单谈谈python的反射机制
2016/06/28 Python
django2.0扩展用户字段示例
2019/02/13 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python 远程开关机的方法
2020/11/18 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
借条如何写
2015/05/26 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js