격자 자바 스크립트로 인라인 편집, 이상한 행동

Question

이 송장 페이지를 만들었습니다. 테이블을 생성하는 repeater가 있습니다. div 태그 같은 로 캡슐화 TD 태그에 들어오는 송장 항목에 대한 설명이 있습니다 : 첫 번째 라인을 참조하면, 내가 온 클릭 자바 스크립트를 호출

<asp:Repeater ID="Repeater1" runat="server"> 
      <ItemTemplate> 
      <tr> 
      <td class="griditem text"> 
       <div class="invoiceDescription" id='<%# "item-" + Eval("ID") %>' value='<%# Eval("ID") %>' onclick="InvoiceItemClicked(this);"> 
        <%# Eval("Description") %> 
       </div> 
      </td> 
      <td class="gridnumb text r"> 
      <%# String.Format("{0:n}", Eval("Quantity"))%> 
      </td> 
      <td class="gridnumb text r"> 
      <%# String.Format("{0:c}", Eval("UnitCost"))%> 
      </td> 
      <td class="gridnumb text r"> 
      <%# String.Format("{0:c}", Eval("Total"))%> 
      </td> 
      </tr> 
      </ItemTemplate> 
      </asp:Repeater> 

은.

이

function InvoiceItemClicked(elm) { 
     var textbox = document.createElement('input'); 
     textbox.setAttribute('type', 'text'); 
     textbox.value = $(elm).text(); 
     $(elm).html(textbox); 
    } 

이이 같은 STH을하려고 처음이며, 첫 번째 촬영에서 근무 :이 (jQuery를 사용)와 같은 기능입니다. 그것은 같은 텍스트가 설정된 텍스트 상자로 행을 변환합니다. 그러나 문제는 생성 된 텍스트 상자를 클릭하면 (포커스) 텍스트가 사라지는 것입니다.

이 인라인 편집을 수행하는 다른 우수 사례도 감사하겠습니다. 그런 다음 웹 서비스 등을 통해 항목을 업데이트해야합니다.

미리 감사드립니다.

Answer 1

맙소사!

function InvoiceItemClicked(elm) { 
     var b = $(elm).hasClass('invoiceDescriptionEditing'); 
     if(!b) 
     { 
      var textbox = document.createElement('input'); 
      textbox.setAttribute('type', 'text'); 
      textbox.setAttribute('id', 'txt'); 
      $(textbox).css('width', '550px'); 
      textbox.value = $(elm).text(); 
      $(elm).html(textbox); 

      $(elm).removeClass('invoiceDescriptionEditable'); 
      $(elm).addClass('invoiceDescriptionEditing'); 
     } 

    } 

이것은 aight! :)