tr à tbody Adjonction utilisant YUI

Question

Je sais que cela peut se faire facilement en utilisant jQuery mais n'ont pas été en mesure de savoir comment l'accomplir avec YUI 2.

Je présente une forme via AJAX et dans le rappel , en cas de succès, je souhaite ajouter les informations qui ont été insérées dans la table existante dans le DOM.

C'est ce que je suis en train sans succès:

var callback = { 
    success: function(o) { 
     var result = YAHOO.lang.JSON.parse(o.responseText); 
     if (result.success == true) { 
      var last_row = YAHOO.util.Dom.getLastChild('tbody_urls'); 

      var html = '<tr><th>' + result.name 
       + '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td></tr>'; 

      var el = YAHOO.util.Dom.insertAfter(html, last_row); // el is being set to NULL so the insert is failing 

      YAHOO.util.Dom.get('form_urls').reset(); 
     } 
    }, 
    failure: function(o) { error(); } 
}; 

Answer 1

Vous ne pouvez pas insérer une chaîne HTML après un nœud. Essayez de créer un élément de ligne, insérez le code HTML à l'intérieur et ajouter l'élément de ligne:

var callback = { 
    success: function(o) { 
     var result = YAHOO.lang.JSON.parse(o.responseText); 
     if (result.success == true) { 
      var last_row = YAHOO.util.Dom.getLastChild('tbody_urls'); 

      var html = '<th>' + result.name 
       + '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td>'; 
      var row=document.createElement("tr"); 
      row.innerHTML=html; 

      var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing 

      YAHOO.util.Dom.get('form_urls').reset(); 
     } 
    }, 
    failure: function(o) { error(); } 
}; 

MISE À JOUR créer un élément dom pour chaque td et e

var callback = { 
    success: function(o) { 
     var result = YAHOO.lang.JSON.parse(o.responseText); 
     if (result.success == true) { 
      var last_row = YAHOO.util.Dom.getLastChild('tbody_urls'); 

      var row=document.createElement("tr"); 
      var th=document.createElement("th"); 
      th.innerHTML=result.name; 
      row.appendChild(th); 
      var td=document.createElement("td"); 
      td.innerHTML='<a href="' + result.url + '" title="' + result.url + '">'; 
      row.appendChild(td); 
      row.appendChild(document.createElement("td")); 
      row.appendChild(document.createElement("td")); 

      var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing 

      YAHOO.util.Dom.get('form_urls').reset(); 
     } 
    }, 
    failure: function(o) { error(); } 
}; 

Answer 2

Mieux vaut utiliser appendChild parce que insertAfter ne fonctionnera pas s'il n'y a pas de tr existants.

<snip> 
var tbody = YAHOO.util.Dom.get('tbody_urls'); 
tbody.appendChild(row);