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的另一个层面内部本身......

Answer 2

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 3

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

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

发生这种情况，由于压痕错字恩玉......显然我得到一个重复表。 只是一个快速提醒...先检查标记！

Answer 4

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

我删除 tbody从目标表像这样。 $（“＃table_contacts tbody”）。remove（）;

然后使用下面的代码来构建一个包含表格行和相应单元格的项目数组，然后将它们附加到一个tbody元素，该元素依次附加到目标表格。为了清楚起见，构建表行的咕噜声工作被抽象为一个单独的函数buildItemRow（）。

$.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

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

$("div_containing_the_table").html(table_content)

或

div_containing_the_table.innerHTML = table_content

即使它起作用，即时更改“tbody”内容似乎不是依靠的做法。