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 相关文章推荐
IP138 IP地址查询小偷实现代码
Feb 15 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
Jun 02 PHP
php上传中文文件名乱码问题处理方案
Feb 03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
Jul 01 PHP
PHP类的声明与实例化及构造方法与析构方法详解
Jan 26 PHP
PHP入门教程之上传文件实例详解
Sep 11 PHP
10个值得深思的PHP面试题
Nov 14 PHP
PHP判断json格式是否正确的实现代码
Sep 20 PHP
PHP高效获取远程图片尺寸和大小的实现方法
Oct 20 PHP
Linux下 php7安装redis的方法
Nov 01 PHP
PHP多进程通信-消息队列使用
Mar 08 PHP
php简单检测404页面的方法示例
Aug 23 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
关于时间计算的结总
2006/12/06 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
javascript window对象属性整理
2009/10/24 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jquery实现动态画圆
2014/12/04 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python之mock模块基本使用方法详解
2019/06/27 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python适合人工智能的理由和优势
2019/06/28 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
python字符串常规操作大全
2021/05/02 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python