Heim > Web-Frontend > js-Tutorial > jQuery realisiert die Methode, eine Tabellenzelle durch Doppelklicken in ein Textfeld umzuwandeln und nach Eingabe von content_jquery in der Datenbank zu aktualisieren

jQuery realisiert die Methode, eine Tabellenzelle durch Doppelklicken in ein Textfeld umzuwandeln und nach Eingabe von content_jquery in der Datenbank zu aktualisieren

WBOY
Freigeben: 2016-05-16 15:29:51
Original
1983 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Methode, bei der durch Doppelklicken auf eine Tabellenzelle diese in ein Textfeld umgewandelt und nach der Eingabe des Inhalts in der Datenbank aktualisiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

JS-Maus-Doppelklick-Ereignis onDblClick

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

Nach dem Login kopieren

Der Wert, den ich hier binde, ist die ID-Nummer, die der aktuellen Zeile entspricht, die in

übergeben wurde
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();
}

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage