jQuery Reemplazar el contenido del cuerpo de la tabla

Question

Parece que tengo problemas con mi script jQuery. Me gustaría reemplazar los contenidos actuales de "tbody" con los nuevos contenidos de "tbody". Actualmente solo continúa agregando datos actuales en lugar de eliminar los datos antiguos e insertar los nuevos datos. ¿Algunas ideas?

Aquí está mi código:

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

Answer 1

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 no aprenden a identificar correctamente el sustituir, que podría terminar con más de una mesa y reemplazar el contenido de ambos. También, ya que está reemplazando el contenido tbody, no se puede añadir otro nivel de tbody dentro de sí mismo ...

Answer 2

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

puede ser suficiente para hacer que funcione si se aprueba la tabla correcta.

De lo contrario, conseguir un poco diseñador y tener la personalización de esta manera:.

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, ...}); 

por cierto - adlibbed código ... debería funcionar, pero aviso de batería patadas en

Answer 3

he tenido el mismo problema, pero fue una cosa muy estúpida Cuando miraba a la fuente de la página de marcado mi fue algo como esto:

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

Esto ocurrió debido a un error tipográfico en la sangría de Jade ... Obviamente que era conseguir una tabla duplicada. Solo un recordatorio rápido ... ¡primero revisa el marcado!

Answer 4

Probablemente no sirva de mucho después de la publicación, probablemente se haya jubilado, pero aquí está mi valor de 2 centavos.

Me quito la tbody del objetivo mesa como tal. $ ("# table_contacts tbody"). Remove();

Luego use el siguiente código para crear una matriz de elementos que contenga una fila de la tabla y las celdas correspondientes, que luego se anexan a un elemento tbody que a su vez se agrega a la tabla de destino. El trabajo sucio que construye la fila de la tabla se abstrae a una función separada, buildItemRow(), en aras de la claridad.

$.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); 
 
       });

Answer 5

a menudo me encuentro tal comportamiento (sobre todo cuando se utiliza la tabla de clasificación de plugins jQuery) (cabecera, básicamente, y la adición de contenido dinámico como cadenas), y finalmente comenzado a guardar contenidos de la tabla enteros en una variable y añadiendo así:

$("div_containing_the_table").html(table_content)

o

div_containing_the_table.innerHTML = table_content

Incluso si funciona, cambiar el contenido de 'tbody' sobre la marcha no parece ser la práctica en la que confiar.