Alex Rivera | Logout

jQuery Replace Table Body Contents

Asked 2010-12-15T17:47:41.377
17

I seem to be having problems with my jQuery script. I would like to replace the current "tbody" contents with the new "tbody" contents. Currently it is just continues to add to the current data instead of removing the old data and inserting the new data. Any ideas?

Here is my 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);  
       });  
    });
};
jquery
Edit
Report

1 Answer

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

Can be enough to make it work if the correct table is passed.

Otherwise, get a little designer and have customisation like this:

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 co
answered 2012-03-01T10:48:18.993

Your Answer