即点即改
首先简单的说下即点即改，按我个人理解就是点击文本内容，然后获取内容复制文本框，进行修改。
写一个简单的demo来看下，请在根目录创建index.html <注意：1、提前下载jquery 2、yourDomainName是指你本地配的虚拟主机，如果没配可以访问localhost或者127.0.0.1>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery</title>
<p><span onclick="fun()" >1234235</span></p>
</head>
<body>
<script src="jq.js"></script>
<script type="text/javascript">
function fun() {
var obj = $("p");
var con = obj.text();
obj.html("<input type="text" onblur="fun1()" />");
$("input").focus().val(con);
}
function fun1() {
var obj = $("input");
$("p").html("<span onclick="fun()" >" + obj.val() + "</span>");
}
</script>
</body>
</html>访问http://yourDomainName/index.html，大家先简单看下效果。接下来，咱们一起分析下该如何实现。
首先，我们需要有一个列表，然后为文本内容添加点击事件，触发点击事件后获取文本内容，原位置创建文本框本为文本框赋值，获取焦点。修改文本内容，失去焦点，触发失去焦点事件，获取修改后值，ajax请求修改对应数据，修改成功返回并替换模板文本框，以下为各位贴上代码<删除以上index.html中内容并贴入以下代码>：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>即点即改</title>
</head>
<style type="text/css">
td{
width: 200px;
}
</style>
<body>
<table border="1">
<tr height="50px">
<th>ID</th>
<th>name</th>
<th>vales</th>
</tr>
<tr height="50px">
<td>1</td>
<td><span class="click">张三</span></td>
<td>人</td>
</tr>
<tr height="50px">
<td>2</td>
<td><span class="click">李四</span></td>
<td>生</td>
</tr>
<tr height="50px">
<td>3</td>
<td><span class="click">王五</span></td>
<td>生</td>
</tr>
</table>
<script src="jq.js"></script>
<script type="text/javascript">
$(document).on("click", ".click", function () {
// 获取操作当前数据的唯一ID.
var obj = $(this);
var id = obj.parent().prev().html();
// 获取当前操作文本内容
var con = obj.html();
// 将当前文本内容替换为文本框
obj.parent().html("<input type="text"/>");
var obj1= $("input");
// 为文本框赋值并获取焦点
obj1.val("").focus().val(con);
// 文本框失去焦点事件
obj1.blur(function () {
// 获取修改后的文本框的值
var a = obj1.val();
// 此处添加ajax事件修改对应数据源中数据(此处ajax请求根据ID修改name的值) 修改数据成功后执行以下操作 赋值
$.ajax({
url:"c.php",
type:"get",
data:{"id" : id, "name" : a},
dataType:"json",
success:function (o) {
if ( o == 1 ) {
obj1.parent().html("<span class="click">" + a + "</span>");
} else {
obj1.parent().html("<span class="click">" + con + "</span>");
}
}
});
});
});
</script>
</body>
</html>创建c.php copy以下内容
$id = (int)$_GET["id"];
$name = $_GET["name"];
// 连接数据库 根据ID 修改name的值 如果修改成返回1 失败返回2 此处忽略修改语句 直接返回成功 请根据具体业务进行修改
echo 1;访问http://yourDomainName/index.html 就实现name这列的修改了。
继续，模仿以上代码，我们稍作修改，实现多列即点即改实现代码。
单列修改就是当前name的值，如果多列的话，只要我们能够获取到当前修改那一列，也就是修改哪一个字段的值，呢么我们也就能完成了，所以 我们做如下改动：
修改index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>即点即改</title>
</head>
<style type="text/css">
td{
width: 200px;
}
</style>
<body>
<table border="1">
<tr height="50px">
<th>ID</th>
<th>name</th>
<th>vales</th>
</tr>
<tr height="50px">
<td>1</td>
<td><span class="click" data-filter="name" data-id="1" >张三</span></td>
<td><span class="click" data-filter="values" data-id="1" >窝气减法飞</span></td>
</tr>
<tr height="50px">
<td>2</td>
<td><span class="click" data-filter="name" data-id="2" >李四</span></td>
<td><span class="click" data-filter="values" data-id="2" >的卡号发过来为空</span></td>
</tr>
<tr height="50px">
<td>3</td>
<td><span class="click" data-filter="name" data-id="3" >王五</span></td>
<td><span class="click" data-filter="values" data-id="3" >萨洛克的奖品为</span></td>
</tr>
</table>
<script src="jq.js"></script>
<script type="text/javascript">
$(document).on("click", ".click", function () {
// 获取操作当前数据的唯一ID.
var obj = $(this);
var id = obj.data("id");
var filter = obj.data("filter");
// 获取当前操作文本内容
var con = obj.html();
// 将当前文本内容替换为文本框
obj.parent().html("<input type="text"/>");
var obj1= $("input");
// 为文本框赋值并获取焦点
obj1.val("").focus().val(con);
// 文本框失去焦点事件
obj1.blur(function () {
// 获取修改后的文本框的值
var a = obj1.val();
// 此处添加ajax事件修改对应数据源中数据(此处ajax请求根据ID修改name的值) 修改数据成功后执行以下操作 赋值
$.ajax({
url:"c.php",
type:"get",
data:{"id" : id, "name" : a, "filter" : filter},
dataType:"json",
success:function (o) {
if ( o == 1 ) {
obj1.parent().html("<span class="click">" + a + "</span>");
} else {
obj1.parent().html("<span class="click">" + con + "</span>");
}
}
});
});
});
</script>
</body>
</html>修改c.php
$id = (int)$_GET["id"]; $name = $_GET["name"]; $filter = $_GET["filter"]; // 连接数据库 根据ID filter 修改name的值 如果修改成返回1 失败返回2 echo 1;
访问http://yourDomainName/index.html 查看效果。
自此，即点即改功能就实现了，这只是其中一种方案，仅供参考，勿喷！！！
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
