PHP + jquery 无刷新编辑表格

最新推荐文章于 2021-03-12 18:26:32 发布

qiangliuqiang

最新推荐文章于 2021-03-12 18:26:32 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

分类专栏： php 文章标签： PHP jQuery CSS Ajax JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/qiangliuqiang/article/details/83778891

php 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用JQuery实现的无刷新页面编辑表格方法。通过AJAX技术，可以在不重新加载整个页面的情况下修改商品名称等信息，并即时更新数据库。具体实现了点击编辑商品名称的功能，包括文本框构建、自动选中、样式调整及异步提交更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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