jQuery替换表体内容

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

函数getData（action，searchVal）{ $.get（'ajax.php'，{action:action，value:searchVal}，函数（数据）{ var json=jQuery.parseJSON（数据）； $（函数（）{ var内容=“”； 内容+=''； for（var i=0；i

函数getData（action，searchVal）{
$.get（'ajax.php'，{action:action，value:searchVal}，函数（数据）{
var json=jQuery.parseJSON（数据）；
$（函数（）{
var内容=“”；
//内容+=''；-**多余**
for（var i=0；i

如果您没有学会正确地确定替换的目标，那么最终可能会得到多个表，并替换这两个表的内容。此外，由于您正在替换tbody内容，因此无法在其内部添加另一级别的tbody

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

如果传递了正确的表，就足以使其工作

否则，请找一位设计师，进行如下定制：

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

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

var UDT={
过程：功能（选择器、设置）{
//设置-设置默认值
变量配置={
“可排序”：false，
“分页”：false，
“操作”：“获取”，
“searchVal”：“位置”
};
如果（设置）{$.extend（配置，设置）；}
var obj=$（选择器）；
$.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：功能（数据，obj）{
var json=jQuery.parseJSON（数据）；
var内容=“”；
for（var i=0；i

---

顺便说一句-即兴代码。。。应该可以工作，但电池警告起作用。

我也有同样的问题，但这是一件非常愚蠢的事情。 当我查看页面源代码时，我的标记是这样的：

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

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

1.
2.
3.
布拉
布拉
布拉

这是由于Jade的缩进输入错误造成的…显然我得到了一个重复的表。

---

只是一个快速提醒…首先检查标记

可能在发帖后这么长时间都没用，你可能已经退休了，但这是我的2美分的价值

I像这样从目标表中移除tbody。 $（“#表#u触点体”）.remove（）

然后使用下面的代码构建一个包含表行和相应单元格的项数组，然后将这些项附加到tbody元素，tbody元素又附加到目标表。为了清晰起见，构建表行的繁重工作被抽象为一个单独的函数buildItemRow（）

$.getJSON（uri）
//成功时，“数据”包含员工列表。
.完成（功能（数据）{
//为传递的员工生成表行和单元格
$。每个（数据、功能（键、项）{
items.push（buildItemRow（item））；
});
$('', {
html:items.join（“”）
}).appendTo（“#表_contacts”）；
})
.fail（函数（jqXHR、textStatus、err）{
$（“#消息”）.toggleClass（'badmessage'）；
$（'#messages'）.html（'处理请求时发生系统错误：'+err+'
'+'系统消息：'+jqXHR.responseText）；
});我经常遇到这样的行为（主要是在使用jQuery表排序插件时），最后开始将整个表的内容保存在一个变量中（基本上是标题，并将动态内容添加为字符串），然后这样添加：

$（“div\u包含\u选项卡