PHP+jQuery實現(xiàn)即點即改功能示例
本文實例講述了PHP+jQuery實現(xiàn)即點即改功能。分享給大家供大家參考,具體如下:
<!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(); //獲取到當(dāng)前點擊對象的值
var pid = $(this).parents("tr").attr('pid'); //通過attr 獲取到設(shè)置的屬性(pid)
//當(dāng)點擊修改文字時 變成文本框并且獲取到原值(content)
$(this).parent().html("<input type='text' class='fo' value='" + content + "'/>");
$(".fo").focus(); //光標(biāo)
$(".fo").blur(function(){
//獲取到修改后的值
var val = $(".fo").val();
//
/*
將所有修改信息傳到后端
*/
$(this).parent().html("<span class='up' style='cursor:pointer;'>"+val+"</span>");
})
})
</script>
運行結(jié)果:

更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《PHP數(shù)組(Array)操作技巧大全》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計算法總結(jié)》、《PHP數(shù)學(xué)運算技巧總結(jié)》、《php字符串(string)用法總結(jié)》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計有所幫助。
- tp5修改(實現(xiàn)即點即改)
- jQuery實現(xiàn)checkbox即點即改批量刪除及中間遇到的坑
- JavaScript中全選、全不選、反選、無刷新刪除、批量刪除、即點即改入庫(在yii框架中操作)的代碼分享
- Laravel+Layer實現(xiàn)圖片上傳功能(整理篇)
- Laravel框架實現(xiàn)發(fā)送短信驗證功能代碼
- laravel框架關(guān)于搜索功能的實現(xiàn)
- laravel框架上傳圖片實現(xiàn)實時預(yù)覽功能
- laravel5.5添加echarts實現(xiàn)畫圖功能的方法
- 使用Laravel中的查詢構(gòu)造器實現(xiàn)增刪改查功能
- Laravel 6 將新增為指定隊列任務(wù)設(shè)置中間件的功能
- Laravel框架實現(xiàn)即點即改功能的方法分析
相關(guān)文章
ThinkPHP 模板substr的截取字符串函數(shù)詳解
這篇文章主要介紹了ThinkPHP 模板substr的截取字符串函數(shù)詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-01-01
PHP實現(xiàn)數(shù)組轉(zhuǎn)JSon和JSon轉(zhuǎn)數(shù)組的方法示例
這篇文章主要介紹了PHP實現(xiàn)數(shù)組轉(zhuǎn)JSon和JSon轉(zhuǎn)數(shù)組的方法,結(jié)合實例形式分析了php數(shù)組與json相互轉(zhuǎn)換實現(xiàn)方法與操作技巧,需要的朋友可以參考下2018-06-06

