JQuery体验之可以编辑的Table 0.001版，有兴趣的看看~~[ASP.NET]

最新推荐文章于 2020-05-08 09:49:23 发布

爱像深蓝

最新推荐文章于 2020-05-08 09:49:23 发布

阅读量1.3k

点赞数

文章标签： asp.net jquery table function input string

本文链接：https://blog.csdn.net/shine_fzh/article/details/6063546

版权

1 首先在网站里随便新建一个aspx页面。

2 在设计页面里拖动工具箱中的Gridview到上面。给Gridview绑定数据源。

3 切换至代码页面，在<head></head>之间添加如下代码。

<mce:script src="Common/JQuery.js" mce_src="Common/JQuery.js" type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> input.commonInput{ border:none; background:#fff; } </style> <script type="text/javascript"> $(function() { $("tr:even").css("background-color", "#C8EAF9"); $("td").not("td:first-child").click(function() { var input = $("<input>"); var cur = $(this); input.attr("type", "text") .attr("class", "commonInput") .width($(this).width() - 6) .height($(this).height() - 6) .val($(this).text()); $(this).empty(); input.click(function() { return false; } ); input.keyup(function(event) { if (13 == event.keyCode) { var id = $(this).parent().parent().children("td:first-child").html(); var colName = ""; //列名 var val = ""; //列的值 var count = 0; //计数器 var len = 0; //位置信息 $(this).parent().parent().children("td").each(function() { count++; if (0 < $(this).children("input").length) { len = count; } }); count = 0; $(this).parent().parent().parent().find("th").each(function() { if (len == ++count) { colName = $(this).html(); } }); val = $(this).val(); cur.html($(this).val()); $.post("Handler/DoUserUpdate.ashx", { val: val, col: colName, id: id }, function(res) { alert(1==res ?"修改成功":"修改失败"); }); } if (27 == event.keyCode) { cur.html(input.val()); } }); input.appendTo($(this)); input[0].select(); input[0].focus(); }); });

4 创建一般过程处理程序DoUserUpdate.ashx，在ProcessRequest方法中写入代码如下

string col = ""; string val = ""; int id = 0; int status = 0; try { col = Convert.ToString(context.Request["col"]); val = Convert.ToString(context.Request["val"]); id = Convert.ToInt32(context.Request["id"]); string sql = string.Format("update t_bas_user set {0} = @val where n_uid = @n_uid",col); System.Data.SqlClient.SqlParameter[] pars = new System.Data.SqlClient.SqlParameter[2]; pars[0] = new System.Data.SqlClient.SqlParameter("@val", val); pars[1] = new System.Data.SqlClient.SqlParameter("@n_uid", id); status = UserfullHelper.SqlHelper.ExecuteNonQuery(sql, pars); } catch { status = -1; } context.Response.ContentType = "text/plain"; context.Response.Write(status.ToString());

这样即可实现对一个表格的编辑功能，当然本文功能还相当薄弱，没有对数据的可编辑作出限制，

主键也可编辑等BUG，留作以后再作修改。