網格使用JavaScript進行內聯編輯，怪異行爲

Question

我製作了此發票頁面。 有一箇中繼器可以生成一個表格。 有發票項目說明進入封裝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> 

如果你看到的第一線，我的onclick調用JavaScript。功能是這樣的（用了jQuery）：

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

這是我第一次嘗試做某事像這樣，它在第一槍工作。它將線條轉換爲文本集中的文本框。但問題是當生成的文本框被點擊（焦點）時，它內部的文本消失。

我也將欣賞任何其他最佳做法來做這個內聯編輯。我需要通過網絡服務等更新項目。

在此先感謝。

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'); 
     } 

    } 

這是光！ :)