PHP + jquery 无刷新 编辑表格

   今天看 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>
 

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript,jquery,PHP,Ajax,css)