使用Ajax分頁HTML輸出正在破解

Question

我正在添加截圖，並且您可以發現問題。

當我點擊下一個按鈕時，第一行第一列被更改，但第一行第二列未改變而不是第一行，第三列被替換。爲什麼它不會取代第一行第二列？

jQuery('document').ready(function() { 
    jQuery('.next-page').click(
     function(event) { 
      event.preventDefault(); 

      url = jQuery(this).attr('href'); 
      jQuery.ajax({ 
       url: url, 
       context: document.body 
      }).done(function(data) { 
       console.log(data); 

       //console.log(data.nextlink); 
       //console.log(data.previousLink); 
       //console.log(jQuery('.report-table>tbody>tr>td').is('td')); 

       posts = data.rows; 
       jQuery('.report-table>tbody>tr>td:eq(0)').replaceWith(posts[0][0]); 
       jQuery('.report-table>tbody>tr>td:eq(1)').replaceWith(posts[0][1]); 
       for(i = 0; i < posts.length; i++) { 
        for(j = 0; j < 7; j++) { 
         //jQuery('.report-table>tbody>tr>td:eq(' + j + ')').replaceWith(posts[i][j]); 

         //console.log(jQuery('.report-table>tbody>tr>td:eq(' + j + ')').is('td')); 
         //console.log(i + " => " + j + " => " + posts[i][j]); 
        } 
       } 
      }); 
     }); 
}); 

下一個按鈕，點擊

之前下一個按鈕點擊後

Answer 1

的.replaceWith()方法刪除所有數據和事件處理程序與刪除的節點相關聯。這就是爲什麼當您更換第一行第一列時，實際上整個td被替換爲posts[0][0]。正因爲如此，當您嘗試更換第二列時，它將替換第三列中的td和posts[0][1]，因爲現在只剩下兩列了。

因此，對於這個，而不是.replaceWith()使用.html()到如下圖所示更換內容：

jQuery('document').ready(function(){ 
jQuery('.next-page').click(
    function(event){ 
     event.preventDefault(); 

     url = jQuery(this).attr('href'); 
     jQuery.ajax({ 
      url: url, 
      context: document.body 
     }).done(function(data){ 
      console.log(data); 

      //console.log(data.nextlink); 
      //console.log(data.previousLink); 
      //console.log(jQuery('.report-table>tbody>tr>td').is('td')); 
      posts = data.rows; 
      jQuery('.report-table>tbody>tr>td:eq(0)').html(posts[0][0]); 
      jQuery('.report-table>tbody>tr>td:eq(1)').html(posts[0][1]); 
      for(i = 0; i < posts.length; i++){ 
       for(j = 0; j < 7; j++){ 
        jQuery('.report-table tbody tr:eq('+ i +') td:eq(' + j + ')').html(posts[i][j]); 
        //jQuery('.report-table>tbody>tr>td:eq(' + j + ')').replaceWith(posts[i][j]); 

        //console.log(jQuery('.report-table>tbody>tr>td:eq(' + j + ')').is('td')); 
        //console.log(i + " => " + j + " => " + posts[i][j]); 
       } 
      } 
     }); 

    }); 
}); 

只要你想它將會取代內容。

爲了使代碼適用於每一行，請將tr:eq('+ yourRowIndex +')設置爲行，並且您正在使用td。