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:... 略

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈