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获得文件扩展名三法
Nov 25 PHP
php 远程关机操作的代码
Dec 05 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
Mar 29 PHP
shopex中集成的站长统计功能的代码简单分析
Aug 11 PHP
Window下PHP三种运行方式图文详解
Jun 11 PHP
使用openssl实现rsa非对称加密算法示例
Jan 24 PHP
在Win7 中为php扩展配置Xcache
Oct 08 PHP
浅析php适配器模式(Adapter)
Nov 25 PHP
thinkPHP实现MemCache分布式缓存功能
Mar 23 PHP
php支持断点续传、分块下载的类
May 02 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
Jan 11 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
May 12 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python3序列化与反序列化用法实例
2015/05/26 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
对python中的高效迭代器函数详解
2018/10/18 Python
详解python 中in 的 用法
2019/12/12 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
实习自我鉴定范文
2013/10/30 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
上课迟到检讨书
2014/01/19 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
《老山界》教学反思
2014/04/08 职场文书
自我推荐信范文
2014/05/09 职场文书
会计电算化专业求职信
2014/06/10 职场文书
离婚协议书范本样本
2014/08/19 职场文书
升学宴演讲稿
2014/09/01 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
js中Object.create实例用法详解
2021/10/05 Javascript