2010-12-15 15 views
8

Je semble avoir des problèmes avec mon script jQuery. Je voudrais remplacer le contenu "tbody" actuel par le nouveau contenu "tbody". Actuellement, il continue simplement à ajouter aux données actuelles au lieu de supprimer les anciennes données et d'insérer les nouvelles données. Des idées?jQuery Remplacer le contenu du corps de la table

Voici mon code:

function getData(action,searchVal) {  
    $.get('ajax.php',{action:action,value:searchVal}, function(data){ 
     var json = jQuery.parseJSON(data); 
     $(function() { 
      var content = ''; 
      content += '<tbody>'; 
      for (var i = 0; i < json.length; i++) { 
      content += '<tr id="' + json[i].ID + '">'; 
      content += '<td><input id="check_' + json[i].ID + '" name="check_' + json[i].ID + '" type="checkbox" value="' + json[i].ID + '" autocomplete=OFF /></td>'; 
      content += '<td>' + json[i].ID + '</td>'; 
      content += '<td>' + json[i].Name + '</td>'; 
      content += '<td>' + json[i].CountryCode + '</td>'; 
      content += '<td>' + json[i].District + '</td>'; 
      content += '<td>' + json[i].Population + '</td>'; 
      content += '<td><a href="#" class="edit">Edit</a> <a href="#" class="delete">Delete</a></td>'; 
      content += '</tr>'; 
      } 
      content += '</tbody>'; 
      $('table tbody').replaceWith(content); 
     }); 
    }); 
}; 

Répondre

29
function getData(action,searchVal) {  
    $.get('ajax.php',{action:action,value:searchVal}, function(data){ 
     var json = jQuery.parseJSON(data); 
     $(function() { 
      var content = ''; 
      //content += '<tbody>'; -- **superfluous** 
      for (var i = 0; i < json.length; i++) { 
      content += '<tr id="' + json[i].ID + '">'; 
      content += '<td><input id="check_' + json[i].ID + '" name="check_' + json[i].ID + '" type="checkbox" value="' + json[i].ID + '" autocomplete=OFF /></td>'; 
      content += '<td>' + json[i].ID + '</td>'; 
      content += '<td>' + json[i].Name + '</td>'; 
      content += '<td>' + json[i].CountryCode + '</td>'; 
      content += '<td>' + json[i].District + '</td>'; 
      content += '<td>' + json[i].Population + '</td>'; 
      content += '<td><a href="#" class="edit">Edit</a> <a href="#" class="delete">Delete</a></td>'; 
      content += '</tr>'; 
      } 
      // content += '</tbody>';-- **superfluous** 
      //$('table tbody').replaceWith(content); **incorrect..** 
      $('#myTable tbody').html(content); // **better. give the table a ID, and replace** 
     }); 
    }); 
}; 

Si vous n'apprenez pas à cibler correctement votre remplacer, vous pourriez vous retrouver avec plus d'une table et remplacer le contenu des deux. aussi, puisque vous remplacez le contenu tbody, vous ne pouvez pas ajouter un autre niveau de tbody l'intérieur lui-même ...

+1

Je l'avais d'abord, mais ne fonctionnait toujours pas.J'ai fait un "alert (data)" pour vérifier que les données étaient correctes (ce qui était bien), mais ajoute toujours au tbody au lieu de remplacer le contenu ... – j3ffz

2
this.find('tbody').empty().append(content); 

Peut-être suffisant pour faire fonctionner si la bonne table est passée.

Sinon, obtenir un peu de design et ont la personnalisation comme ceci:.

var UDT = { 
    proc : function(selector, settings) { 
     // settings - set defaults 
     var config = { 
      'sortable':  false, 
      'pagination': false, 
      'action':  'get', 
      'searchVal': 'location' 
     }; 
     if (settings){$.extend(config, settings);} 
     var obj = $(selector); 

     $.get('ajax.php',{action:action,value:searchVal}, UDT.sortShowData(data,obj)); 
     if (config.sortable) {obj.children('thead').find('th').addClass('sort');} 
     if (config.pagination) {UDT.pageTable(obj);} 
    }, 
    sortShowData : function(data,obj) { 
     var json = jQuery.parseJSON(data); 
     var content = ''; 
     for (var i = 0; i < json.length; i++) { 
      content += '<tr id="' + json[i].ID + '">'; 
      content += '<td><input id="check_' + json[i].ID + '" name="check_' + json[i].ID + '" type="checkbox" value="' + json[i].ID + '" autocomplete=OFF /></td>'; 
      content += '<td>' + json[i].ID + '</td>'; 
      content += '<td>' + json[i].Name + '</td>'; 
      content += '<td>' + json[i].CountryCode + '</td>'; 
      content += '<td>' + json[i].District + '</td>'; 
      content += '<td>' + json[i].Population + '</td>'; 
      content += '<td><a href="#" class="edit">Edit</a> <a href="#" class="delete">Delete</a></td>'; 
      content += '</tr>'; 
     } 
     obj.find('tbody').empty().append(content); 
    }, 
    pageTable : function(obj) { 
     // get content region for table height, tr height - work out how many rows can fit etc 
     // else maxrows value 
     // create tfoot content and append/replace to table 
    } 
}; 
// call for UpDateTable 
UDT.proc($(##target_table##),{sortable:true, pagination:true, ...}); 

BTW - adlibbed code ... devrait fonctionner, mais avertissement de batterie coups de pied dans

0

J'ai eu le même problème, mais il était une chose très stupide. Quand je regardais à la source de la page mon code était quelque chose comme ceci:

<table> 
    <thead> 
    <th> 1 </th> 
    <th> 2 </th> 
    <th> 3 </th> 
    </thead> 
    <tbody> </tbody> 
     <tr> bla </tr> 
     <tr> bla </tr> 
     <tr> bla </tr> 
</table> 

Cela a eu lieu en raison d'une faute de frappe en retrait Jade ... Il est évident que je devenais une table en double. Juste un petit rappel ... vérifiez d'abord le balisage !!!

2

Probablement ne pas aider si longtemps après la poste, vous avez probablement pris sa retraite, mais voici ma valeur de 2 cents.

I supprime le tbody de la table cible ainsi. $ ("# table_contacts tbody"). Remove();

Utilisez ensuite le code suivant pour créer un tableau d'éléments contenant une ligne de table et des cellules correspondantes, qui sont ensuite ajoutées à un élément tbody qui est à son tour ajouté à la table cible. Le travail de grognement qui construit la ligne du tableau est résumé à une fonction séparée, buildItemRow(), pour des raisons de clarté.

$.getJSON(uri) 
 
       // On success, 'data' contains a list of employees. 
 
       .done(function (data) { 
 
        // build table rows and cells for passed employee 
 
        $.each(data, function (key, item) { 
 
         items.push(buildItemRow(item));       
 
        }); 
 
        $('<tbody/>', { 
 
         html: items.join('') 
 
        }).appendTo('#table_contacts');     
 
       }) 
 
       .fail(function (jqXHR, textStatus, err) { 
 
        $('#messages').toggleClass('badmessage'); 
 
        $('#messages').html('A system error occurred while processing the request: ' + err + '<br />' + 'System Message: ' + jqXHR.responseText); 
 
       });

+0

J'espère que personne ne prendra sa retraite après seulement 5 ans de travail. :RÉ –

0

je rencontre souvent ce type de comportement (la plupart du temps lors de l'utilisation des plugins table de tri jQuery), et finalement commencé à garder le contenu de la table entière dans une variable (en-tête essentiellement et l'ajout de contenu dynamique sous forme de chaînes) et ajoutant comme ceci:

$("div_containing_the_table").html(table_content)

ou

div_containing_the_table.innerHTML = table_content

Même si cela fonctionne, changer le contenu de «tbody» à la volée ne semble pas être la pratique sur laquelle compter.

Questions connexes