2011-05-21 4 views
0

Bonjour, je crée dynamiquement une table dans jquery. Qu'est-ce que je fais ici est également l'ajout de classe qui est "glisser-ui-widget" mais il n'a pas d'incidence/travail sur ma table.L'ajout de la classe ne fonctionne pas

var tab_title = $tab_title_input.val() || 'Tab '+tab_counter; 
     //alert(tab_title); 
     $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);     

     var newTableDiv = $("<div />",{id: 'dialog'+tab_counter});   
     newTableDiv.appendTo("body");   
     alert("div appended to body"+" "+'dialog'+tab_counter); 
     //var newTable = $('<table id="myTable'+tab_counter+'" class="draggable" ></table>'); 
********************Class which i am adding in table but not working*********** 
     var newTable = $("<table />",{"class": "draggable ui-widget",id: 'myTable'+tab_counter,width: '100%',border: '0',cellspacing: '1px',cellpadding: '2px'});      
     newTable.appendTo('#dialog'+tab_counter);   
     alert('myTable'+tab_counter); 
     newTable.append('<thead class="ui-widget-header"><tr></tr></thead>'); 
     alert("Header Created"); 
     var thead = $('thead tr', newTable); 
     thead.append('<th><strong>Symbol</strong></th>'); 
     thead.append('<th><strong>Price</strong></th>'); 
     thead.append('<th><strong>Volume</strong></th>'); 
     thead.append('<th><strong>Buy</strong></th>'); 
     thead.append('<th><strong>Sell</strong></th>'); 
     alert("Header Created");    

Qu'est-ce exactement que je fais mal ici. Je suis très nouveau à jquery et essaie encore de mon mieux.

Répondre

0

En fait, vous pouvez créer une table très facile à jquery:

var table = "<table class='draggable ui-widget'>" + 
      "<thead><tr><th></th></tr></thead>"+ 
      "<tbody>"+ 
      "<tr><td></td></tr>"+ 
      "<tr><td></td></tr>"+ 
      "</tbody></table>"; 

Ensuite, ajoutez à votre div par (#divid).append(table); Cela devrait fonctionner, il est aussi très facile.

+0

@tittletipz .... J'ai essayé avec ceci aussi, mais cela ne fonctionne pas :(aucune classe ne travaille non plus .Il a créé une table mais classe ne fonctionne pas –

+0

@tittletipz ..... quand j'ajoute aussi une classe en ça marche bien mais quand je place la classe en

ça ne marche pas –

+0

@Java_NewBie: - hei try @Yury La réponse de Tarabanko –

0

Ajouter une classe n'est pas suffisant. SACHEZ que vous devriez indiquer explicitement que votre élément est déplaçable. Par exemple, ajoutez l'ID à votre élément de table <table id='draggable'..., puis faites-le glisser $('#draggable').draggable();.

Par ailleurs, les manipulations dom sont très coûteuses. Donc, c'est mieux en termes de coûts de performance d'abord créer toute la table html comme @tittletipz l'a fait remarquer et ensuite l'ajouter à votre div.

+0

Yury Tarabanko .... fondamentalement je crée également des id dynamiques aussi bien et j'ai essayé avec cette solution aussi bien mais elle ne fonctionne pas. :(quand je crée manuellement une table et fournissez un id à une table. bien, mais un problème se produit quand je vais pour une création dynamique d'une table –

+0

Comme je l'ai déjà dit, l'ajout de la classe 'draggable' n'est pas suffisant pour rendre l'élément draggable http://jsfiddle.net/YV7Pf/2/.' $ ("#draggable") .draggable(); 'Le point ne concerne pas les identifiants –

+0

Yury Tarabanko ... merci pour votre inquiétude. J'ai essayé $ (" #draggable ") .draggable(); table mais pas les colonnes mais au moins ça a marché un peu :). je veux faire glisser les colonnes. manuellement il fonctionne bien mais dynamiquement il traîne toute la table pas les colonnes. –

0

classe Dynamiquement ajoutée ne peut être consulté par les événements normalement

Dans votre exemple, si je dois déclencher une fonction sur événement click, je ne peux pas utiliser

$('.draggable').click(function{ 
}); 

je devrais utiliser

$('.draggable').live('click', function{ 
    }); 

comme la liaison à l'événement peut se produire uniquement comme ceci. Mais vous n'avez pas mentionné comment voulez-vous utiliser la classe

+0

@ sathishn .. j'ai également essayé avec cette solution mais ne fonctionne pas ... je suis coincé dans ceci :(. –

Questions connexes