jQuery 替换表主体内容

Question

我的 jQuery 脚本似乎有问题。我想用新的“tbody”内容替换当前的“tbody”内容。目前只是继续向当前数据添加，而不是删除旧数据并插入新数据。有什么想法吗？

这是我的代码:

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

如果您不学会正确定位替换，您最终可能会得到多个表并替换两个表的内容。另外，由于您要替换 tbody 内容，因此您无法在其内部添加另一级别的 tbody...