Heim  >  Artikel  >  Web-Frontend  >  JS Doppelklicken Sie auf das Eingabefeld, um den Inhalt stapelweise zu ändern

JS Doppelklicken Sie auf das Eingabefeld, um den Inhalt stapelweise zu ändern

巴扎黑
巴扎黑Original
2016-12-22 13:58:181056Durchsuche

Doppelklicken Sie auf die Leerstelle, sonst wird der Text zu einem Eingabefeld, um den Inhalt zu ändern:

HTML-Code

<td class="center" ondblclick="ShowElement(this,&#39;intro&#39;)">{$vo.intro}</td>
<td class="center" ondblclick="ShowElement(this,&#39;address&#39;)">{$vo.address}</td>

js-Code

//双击修改
function ShowElement(element,abc){
 // console.log(abc);
 var list = abc;
 var me = element;
 var oldhtml = element.innerHTML;
 var newobj = document.createElement(&#39;input&#39;);
 newobj.type = &#39;text&#39;;//修改新创建的input的类型
 element.innerHTML = &#39;&#39;;//清空td中的内容用于存放新创建input;
 $(newobj).attr({ value:oldhtml});
 element.appendChild(newobj);//把input放入td
 //给input对象绑定鼠标移开事件
 newobj.onblur = function(){
  // 判断是否满足发送ajax的条件
  if(this.value != oldhtml){
   element.innerHTML = this.value;
   var value = this.value;
   // alert(value);
   //发送ajax请求
   var id = $(me).parents(&#39;.gradeA&#39;).find(&#39;.sid&#39;).html();
   var url = "{:U(&#39;Admin/Friend/onclick&#39;)}";
   var btn = $(this);
   $.ajax({
      url:url,
      data:{id:id,list:list,value:value},
      type:&#39;post&#39;,
      success:function(data){
         console.log(data);
        if(data == 0){
          alert(&#39;修改成功&#39;)
        }else{
          alert(&#39;修改失败&#39;);
        }
      }
   })
  }else{
   element.innerHTML = oldhtml;//放入原来的内容
   // return false;
  }
 }
 newobj.focus();
 // return false;
 }


Stellungnahme:
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