2010-08-05 17 views
1

J'ai créé cette page de facture. Un répéteur génère une table. Il y a des descriptions de poste facture à venir en balises td encapsulées avec des balises div comme ceci:Grid Édition en ligne avec JavaScript, comportement bizarre

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

Si vous voyez la première ligne, j'appelle un javascript onclick. La fonction est comme ceci (utilise jQuery):

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

C'est la première fois que j'essaie de faire qqch comme ça, et il a travaillé dans le premier coup. Il transforme les lignes en zones de texte avec le même jeu de texte. Mais le problème est lorsque la zone de texte générée est cliquée (focus), le texte à l'intérieur disparaît.

J'apprécierai également toute autre bonne pratique pour faire cette édition en ligne. Je dois ensuite mettre à jour les articles via des services web, etc.

Merci d'avance.

Répondre

0

ouais mon mauvais!

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

    } 

c'est environ! :)