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」內容似乎不是依靠的做法。