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+AJAX聊天程序[聊天室]提供下载
Jul 21 PHP
php session 检测和注销
Mar 16 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
Aug 08 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
Jun 02 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
Jan 03 PHP
PHP Reflection API详解
May 12 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
Mar 17 PHP
PHP模拟http请求的方法详解
Nov 09 PHP
PHP+AJAX 投票器功能
Nov 11 PHP
PHP使用Redis长连接的方法详解
Feb 12 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
Aug 12 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
Apr 06 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP脚本的10个技巧(8)
2006/10/09 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
一段实用的php验证码函数
2016/05/19 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
python简单分割文件的方法
2015/07/30 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
采购员岗位职责
2013/11/15 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
委托公证书
2014/04/08 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
初三数学教学反思
2016/02/17 职场文书
python保存图片的四个常用方法
2022/02/28 Python