网格使用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'); 
     } 

    } 

这是光！ :)