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循环输出数据库内容的代码
May 24 PHP
php session应用实例 登录验证
Mar 16 PHP
PHP 写文本日志实现代码
May 18 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
Jul 31 PHP
基于xcache的配置与使用详解
Jun 18 PHP
ThinkPHP中自定义目录结构的设置方法
Aug 15 PHP
laravel 4安装及入门图文教程
Oct 29 PHP
ThinkPHP中RBAC类的四种用法分析
Nov 24 PHP
PHP实现CSV文件的导入和导出类
Mar 24 PHP
PHP实现通过get方式识别用户发送邮件的方法
Jul 16 PHP
Laravel学习教程之从入口到输出过程详解
Aug 27 PHP
TP5框架请求响应参数实例分析
Oct 17 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
PHP4之真OO
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
abstract是什么意思
2012/02/12 面试题
销售自我评价
2013/10/22 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
Nginx跨域问题解析与解决
2022/08/05 Servers