Jquery鼠标动态添加文本框自动更新排序

Jquery实现鼠标点击时动态添加文本框离开时自动更新排序

开始讲解

更新前：排序栏目只显示数字

当把鼠标放在数字上单击时：变为文本框，填入数字后，鼠标离开。自动更新。

贴出代码：

$(document).ready(function(){ 
  //修改栏目id
  $(".BY").click(function() { 
  var r = /^[0-9]*[1-9][0-9]*$/ //判断正整数的正则表达式。
  var old = $(this).text(); 
  var o = $(this); 
  o.html("<input class="OnBY" type="text"  onMouseOver="this.select();" value="" + old + ""/>"); 
$(".OnBY").blur(function() { 
  var number=$(".OnBY").val();  //获取文本框中的值。
  var columnid=o.attr("DbID");  //获取DbID属性的值  栏目的ID号。
  if(!r.test(number))
{
alert("数字格式错误");
$(this).select()
return false;
}
  if(number.length==0) //判断文本框中是否有值。
  {
alert("不能为空");
$(this).select()
return false;
  }
  else //Jquery异步更新排序号。
  {
  $.ajax({ 
  type: "GET", 
  url: "../AjaxAsyn/UpdateSortNo.aspx", 
data: "ID=" + o.attr("DbID") + "&BY=" + $(".OnBY").val()+"&date="+ new  Date().getTime()+"&Type=1",//增加时间参数，表示请求的是不同的页面  ，type是一个标识：标识对文章更改排序，还是对产品，还是对栏目。
beforeSend:function(XMLHttpRequest) //更新前显示等待的图片
{
$("#showResult"+columnid).show();
},
  success: function(msg)  //更新成功
{ 
  o.html($(".OnBY").val());
$("#showResult"+columnid).hide();
//o.html(old); 
} 
  });
  } 
}); 
}); 

aspx页面代码：
  <div class="col7">
  <span class="BY"  DbID='<%#Eval("id") %>' title="点击修改"><%# Eval("SortNo") %></span> 
  </div>

更新排序的后台代码：

 columnId = Web.CommFun.UrlParameters.IntParameters(this, "ID");
  SortNo = Web.CommFun.UrlParameters.IntParameters(this, "BY");
  dateTime = Web.CommFun.UrlParameters.StringParameters(this, "date");
  TypeNo = Web.CommFun.UrlParameters.IntParameters(this, "Type");  //TypeNo  1修改栏目编号 2修改二级栏目编号 3新闻文章 4产品排序
  UpdateSorts();
  }
  private void UpdateSorts()
  { 
  switch (TypeNo)
  {
  case 1:
  {
  DAL.ColumnDAL dal = new DAL.ColumnDAL();
  if (dal.UpdateSortNo(columnId, SortNo) > 0)
  {
  Response.Write("更新排序成功");
  Response.End();
  }
  else
  {
  Response.Write("更新失败!");
  Response.End();
  }
  break;
  }
  case 2:... 略

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠