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 相关文章推荐
xml+php动态载入与分页
Oct 09 PHP
PHP 文章中的远程图片采集到本地的代码
Jul 30 PHP
PHP URL地址获取函数代码(端口等) 推荐
May 15 PHP
mac下Apache + MySql + PHP搭建网站开发环境
Jun 02 PHP
php使用cookie实现记住登录状态
Apr 27 PHP
利用PHP获取网站访客的所在地位置
Jan 18 PHP
yii2中dropDownList实现二级和三级联动写法
Apr 26 PHP
thinkPHP微信分享接口JSSDK用法实例
Jul 07 PHP
PHPExcel 修改已存在Excel的方法
May 03 PHP
使用vs code编辑调试php配置的方法
Jan 29 PHP
Laravel 创建可以传递参数 Console服务的例子
Oct 14 PHP
thinkphp5 模型实例化获得数据对象的教程
Oct 18 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP数组操作类实例
2015/07/11 PHP
xml和web特殊字符
2009/04/28 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js分页代码分享
2014/04/28 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
vue的mixins属性详解
2018/03/14 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
js实现开关灯效果
2020/03/30 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
200行python代码实现2048游戏
2019/07/17 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
毕业生教师求职信
2013/10/20 职场文书
新闻系毕业生推荐信
2013/11/16 职场文书
装饰活动策划方案
2014/02/11 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
免职证明样本
2014/10/23 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
致运动员加油稿
2015/07/21 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js