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内容，你不能在其内部添加另一个级别的t ...

Answer 2

可能在帖子之后很久没有帮助，你可能已经退休了，但这是我2美分的价值。

我从目标表中删除 tbody，就像这样。 $（＆＃34; #table_contacts tbody＆＃34;）。remove（）;

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

＆＃13;

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

＆＃13;

Answer 3

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

顺便说一下 - adlibbed代码......应该可以工作，但电池警告会被踢出去。

Answer 4

我经常遇到这样的行为（主要是在使用jQuery表排序插件时），最后开始将整个表内容保存在变量中（基本上是标题，并将动态内容添加为字符串）并添加如下：

$("div_containing_the_table").html(table_content)

或

div_containing_the_table.innerHTML = table_content

即使它有效，动态改变'tbody'内容似乎也不是依赖的做法。

Answer 5

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

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

这是由于缩进拼写错误而发生的......显然我得到了一张重复的表格。只需快速提醒......先检查标记!!!

jQuery替换表正文内容

5 个答案: