Home > Web Front-end > JS Tutorial > jQuery dynamically operates Table cells

jQuery dynamically operates Table cells

php中世界最好的语言
Release: 2018-04-26 13:53:17
Original
1869 people have browsed it

This time I will bring you jQueryDynamic operation of Table cells, what are the precautions for jQuery to dynamically operate Table cells, the following is a practical case, let's take a look.

JS mouse double-click eventonDblClick

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

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=&#39;text&#39; name=&#39;test&#39; style=&#39;width:50%;&#39;";
  str += "onkeypress=&#39;return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46&#39;";
  str += "onpaste=&#39;return !clipboardData.getData(&#39;text&#39;).match(/\D/)&#39;";
  str += "ondragenter=&#39;return false&#39; />";
  var newobj = document.createElement(str);  //创建新的input元素
  newobj.setAttribute("value", oldhtml);//把原来单元格中的值赋给文本框
  newobj.onblur = function() {
    element.innerHTML = this.value ? this.value : oldhtml; //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值 
    var sort = element.innerHTML;
    $.get("UpdateFlag.ashx?sort=" + sort + "&&productid=" + productid + "&&flag=" + flag, function(data) { });
  }
  element.innerHTML = '';
  element.appendChild(newobj);//把新的值赋到单元格
  newobj.focus();
}
Copy after login

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

jquery realizes that only numbers can be entered in the specified text box

How to use Mobile to control get when the page returns ask

The above is the detailed content of jQuery dynamically operates Table cells. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template