Home  >  Article  >  Web Front-end  >  jQuery realizes the method of double-clicking a Table cell to turn it into a text box and updating it to the database after inputting the content_jquery

jQuery realizes the method of double-clicking a Table cell to turn it into a text box and updating it to the database after inputting the content_jquery

WBOY
WBOYOriginal
2016-05-16 15:29:511977browse

The example in this article describes the jQuery method of double-clicking a Table cell to turn it into a text box and updating it to the database after inputting the content. Share it with everyone for your reference, the details are as follows:

JS mouse double-click event onDblClick

<td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %>
</td>

The value I bind here is the ID number corresponding to the current row passed in

function ShowElement(element, productid, flag, ishotorcommend) {
  if (flag == 0 && ishotorcommend == 0) {
    alert("请先设置该产品为推荐");
    return;
  }
  if (flag == 1 && ishotorcommend == 0) {
    alert("请先设置该产品为热销");
    return;
  }
  var oldhtml = element.innerHTML;//原单元格里的值
  var str = "<input type='text' name='test' style='width:50%;'";
  str += "onkeypress='return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46'";
  str += "onpaste='return !clipboardData.getData('text').match(/\D/)'";
  str += "ondragenter='return false' />";
  var newobj = document.createElement(str);  //创建新的input元素
  newobj.setAttribute("value", oldhtml);//把原来单元格中的值赋给文本框
  newobj.onblur = function() {
    element.innerHTML = this.value &#63; this.value : oldhtml; //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值 
    var sort = element.innerHTML;
    $.get("UpdateFlag.ashx&#63;sort=" + sort + "&&productid=" + productid + "&&flag=" + flag, function(data) { });
  }
  element.innerHTML = '';
  element.appendChild(newobj);//把新的值赋到单元格
  newobj.focus();
}

I hope this article will be helpful to everyone in jQuery programming.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn