PHP+jQuery实现即点即改功能示例

2024-07-31 19:23:21

本文实例讲述了PHP+jQuery实现即点即改功能。分享给大家供大家参考，具体如下：

<!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 pid="<?= $v['id'];?>">
      <td><span class="up" style="cursor:pointer;"><?= $v['姓名'];?></span></td>
      <td><?= $v['性别'];?></td>
    </tr>
  <?php endforeach; ?>
  </table>
</body>
</html>
<script>
  //即点即改
  $(document).on("click",".up",function(){
    var content = $(this).text(); //获取到当前点击对象的值
    var pid = $(this).parents("tr").attr('pid');  //通过attr 获取到设置的属性（pid）
    //当点击修改文字时 变成文本框并且获取到原值（content）
    $(this).parent().html("<input type='text' class='fo' value='" + content + "'/>");
    $(".fo").focus(); //光标
    $(".fo").blur(function(){
      //获取到修改后的值
      var val = $(".fo").val();
      //
      /*
      将所有修改信息传到后端
       */
      $(this).parent().html("<span class='up' style='cursor:pointer;'>"+val+"</span>");
    })
  })
</script>

运行结果：

更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP数组(Array)操作技巧大全》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》、《PHP数学运算技巧总结》、《php字符串(string)用法总结》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

laravel5.5添加echarts实现画图功能的方法

一.下载echarts 我用的是3.X版本,下载地址二.在页面中引入echarts <script type="text/javascript" src="/js/echarts.min.js"></script> 我把下载下来的echarts.min.js放在了public/js/目录下三.通过post的请求获取数据并在页面展示 1.添加路由 Route::get('/test2', 'CunliangController@test2'
laravel框架关于搜索功能的实现

这里的搜索功能主要基于表单get提交实现的 <form action="/backend/auditList" method="get"> <table class="search_tab"> <tr> <th width="120">选择分类:</th> <td> <select name="class" > <op
tp5修改(实现即点即改)

效果如下所示: 点击修改时把想修改的变成input框实现代码如下:根据自己实际情况修改即可. <script type="text/javascript"> $(document).on('click','.xiu',function(){ old_val=$(this).html(); // $(this).parent().html("<input type=\'text\' value="+old_val+" class='inp
Laravel+Layer实现图片上传功能(整理篇)

♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu
Laravel框架实现即点即改功能的方法分析

本文实例讲述了Laravel框架实现即点即改功能的方法.分享给大家供大家参考,具体如下: 有的时候我们不需要更改大量数据,只需要更改一个字段的时候,我们就用到了即点即改,以用户模块,修改用户名称为例,下图为我的展示模块当我们点击用户名时,会出现一个修改框,那么这个修改框是怎么来的呢? 我们点击时,隐藏在这个td当中的修改框会出现,而展示时的用户名会隐藏起来,我们怎么利用代码实现? <td onclick="saveuser({{$v->id}})"> <spa
Laravel框架实现发送短信验证功能代码

Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. Laravel短信验证思路详解今天在做到用户注册和个人中心的安全管理时,我实现借助第三方短信平台在Laravel框架中进行手机验证的设置; 由于我做的是一个为客户提供医疗咨询和保健品网站,所以我们对客户个人隐私的保护显得尤为重要,因而在客户登录后进入个人中心前,
laravel框架上传图片实现实时预览功能

在laravel框架中上传图片并实时预览,其实并没有那么难,下面给大家展示一下: HTML代码: <img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src=""> <input type="file" name="house_
jQuery实现checkbox即点即改批量删除及中间遇到的坑

最近要用jQuery实现一个批量删除操作,效果如下图最终页面page.html,此页面使用了bootstrap和jQuery,如果没有需要下载一下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频管理</title> <link rel="stylesheet" type="text/css"
Laravel 6 将新增为指定队列任务设置中间件的功能

Taylor Otwell 在 Laravel 6 中新增了为指定队列任务设置中间件的能力,以便我们在执行某些队列任务之前先执行一些业务逻辑: This [pull request] adds an easy way to have job specific middleware for queued jobs. Global job middleware were actually already possible by calling Bus::pipeThrough([]) in a se
使用Laravel中的查询构造器实现增删改查功能

引言上一篇介绍了如何在windows环境下跑一个 laravel 项目,这一篇写如何使用 laravel 中的查询构造器实现增删改查. 读这篇文章时我默认你已拥有如下知识: 了解php的基础语法了解数据库设计了解常用的sql查询正文实现增删改查前, 我们先准备一些步骤: php, nginx, mysql 服务正确启用新建一个数据库及其数据表开启服务我们打开上篇文章介绍的 Wnmp.exe -> Start all 然后cmd上键入命令: D:/wnmp/Wnmp/php/ph
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

PHP+jQuery实现即点即改功能示例

相关推荐

随机推荐