|
|
今天看 ecshop 的时候看到里面修改商品名称的效果。看他的代码很烦。于是在网上找的几个例子，稍微改了下。
cat_ajax.js
/*
* 说明：用Jquery的方法，无刷新页面，编辑表格
*/
$(function() {
//给页面中有caname类的标签上加上click函数
$(".caname").click(function() {
var objTD = $(this);
//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
var oldText = $.trim(objTD.text());
//构造一个input的标签对象（作用是为了让这个input失效，不然点击多次后，文字会消失）
var input = $("<input type='text' value='" + oldText + "' />");
//当前td的内容变为文本框，并且把老类别名放进去
objTD.html(input);
//设置文本框的点击事件失效
input.click(function() {
return false;
});
//设置文本框样式，让界面显示的人性化点
input.css("font-size", "12px");
input.css("text-align", "center");
input.css("background-color", "#F7F2DE");
input.width("120px");
//自动选中文本框中的文字
input.select();
//文本框失去焦点时重新变为文本
input.blur(function() {
//获得新输入的类别名
var newText = $(this).val();
//获取该类别名所对应的ID(caId)
var caId = objTD.prev().text();
//获取要传到"一般处理文件"中的URL
var url = "cat.php?act=4&caid=" + caId + "&catname=" + newText; //处理函数类路径
//AJAX异步更改数据库,data为成功后的回调返回值，用于判断结果提示
$.get(url, function(data) {
if(data == 1) {
//用新的类别名文字替换之前变过来的输入框状态
objTD.html(newText);
$("#div_id_msg").text("");
} else{
alert('修改失败！');
}
});
});
});
});
cat.php
if($act == 4)//修改类别名
{
$id = isset($_REQUEST['caid']) ? $_REQUEST['caid'] : '0';
if(!ctype_digit($id))
{
exit;
}
$catname = isset($_REQUEST['catname']) ? trim($_REQUEST['catname']) : '';
if(empty($catname) || len($catname) > 50){exit;}
$result = $dbObj->execute('UPDATE `cat` SET `name` = "'.$catname.'" WHERE `id` ='.$id);
if($result)
{
echo 1;//修改成功
}else
{
echo 0; //修改失败
}
}
cat.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文章类别</title>
<link rel="stylesheet" type="text/css" href="skin/css/base.css">
<script language="javascript" src="skin/js/frame/jquery-1.3.2.min.js"></script>
<script language="javascript" src="skin/js/frame/cat_ajax.js"></script>
</head>
<body>
<table>
<tr><td id="cat" class='caname'>测试</td></tr>
</table>
</body>
</html>
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-4-3 09:41:31
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡