当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

Javascript
将HTML自动转为JS代码
一端时间轮换的广告
制作特殊字的脚本
美化下拉列表
文字幻灯片
判断是否输入完毕再激活提交按钮
JS控制表格隔行变色
左右两侧的广告代码 简单
父窗口获取弹出子窗口文本框的值
网页的标准,IMG不支持onload标签怎么办
一个很简单的办法实现TD的加亮效果.
文本框栏目介绍
自动检查并替换文本框内的字符
会自动逐行上升的文本框
列表内容的选择
对textarea框的代码调试,而且功能上使用非常方便,酷
提高代码性能技巧谈—以创建千行表格为例
Javascript的IE和Firefox兼容性汇编
让插入到 innerHTML 中的 script 跑起来
DEFER怎么用?

Javascript 中的 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 191 ::
收藏到网摘: n/a

使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据的实现代码。 下面是js Code:
复制代码 代码如下:

$(function() { // 相当于在页面中的body标签加上onload事件
$(".caname").click(function() { // 给页面中有caname类的标签加上click函数
var objTD = $(this);
var oldText = $.trim(objTD.text()); // 保存老的类别名称
var input = $("<input type='text' value='" + oldText + "' />"); // 文本框的HTML代码
objTD.html(input); // 当前td的内容变为文本框
// 设置文本框的点击事件失效
input.click(function() {
return false;
});
// 设置文本框的样式
input.css("border-width", "0px"); //边框为0
input.height(objTD.height()); //文本框的高度为当前td单元格的高度
input.width(objTD.width()); // 宽度为当前td单元格的宽度
input.css("font-size", "14px"); // 文本框的内容文字大小为14px
input.css("text-align", "center"); // 文本居中
input.trigger("focus").trigger("select"); // 全选
// 文本框失去焦点时重新变为文本
input.blur(function() {
var newText = $(this).val(); // 修改后的名称
var input_blur = $(this);
// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
// 获取该类别名所对应的ID(序号)
var caid = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();
$.get(url, function(data) {
if (data == "false") {
$("#test").text("类别修改失败,请检查是否类别名称重复!");
input_blur.trigger("focus").trigger("select"); // 文本框全选
} else {
$("#test").text("");
objTD.html(newText);
}
});
} else {
// 前后文本一致,把文本框变成标签
objTD.html(newText);
}
});
// 在文本框中按下键盘某键
input.keydown(function(event) {
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi) {
case 13: // 按下回车键 ,把修改后的值提交到数据库
// $("#test").text("您按下的键值是: " + jianzhi);
var newText = input_keydown.val(); // 修改后的名称
// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
if (oldText != newText) {
// 获取该类别名所对应的ID(序号)
var caid = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();
$.get(url, function(data) {
if (data == "false") {
$("#test").text("类别修改失败,请检查是否类别名称重复!");
input_keydown.trigger("focus").trigger("select"); // 文本框全选
} else {
$("#test").text("");
objTD.html(newText);
}
});
} else {
// 前后文本一致,把文本框变成标签
objTD.html(newText);
}
break;
case 27: // 按下Esc键, 取消修改,把文本框变成标签
$("#test").text("");
objTD.html(oldText);
break;
}
});
});
});
// 屏蔽Enter按键
$(document).keydown(function(event) {
switch (event.keyCode) {
case 13: return false;
}
});

下面是 一般处理程序代码 ChangeCaName.ashx
复制代码 代码如下:

<%@ WebHandler Language="C#" Class="ChangeCaName" %>
using System;
using System.Web;
using BLL;
using Model;
public class ChangeCaName : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string caid = context.Request.QueryString["caid"];
string caname = context.Server.UrlDecode(context.Request.QueryString["caname"]);
// 判断数据库中是否已经存在同名类别
if (new CategoryManager().IsExists(caname))
{
context.Response.Write("false");
return;
}
// 更改数据库类别名
Category ca = new Category(caid, caname);
bool b = new CategoryManager().Update(ca);
if (b)
{
context.Response.Write("true");
}
else
{
context.Response.Write("false");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}