動態插入json數據行到現有表

所以我有一個數據庫結果頁面顯示我的一個表中的數據行。我試圖實現一個功能，如果用戶點擊某一行，與另一個表中的該FK有關的附加數據將顯示爲單擊行下面的數據行，但在原始表的下一行上方。從我讀過的內容來看，沒有可用的動畫 - 只要它出現在正確的地方，我就會開心。然後他們可以再次點擊隱藏。動態插入json數據行到現有表

我已經對點擊函數進行了編碼，並讓json數據返回SQL查詢數據;我只是不知道如何實現這個功能與jQuery作爲一個JavaScript的& jquery新人。這是我的嘗試：

$(document).ready(function() { 
$('.target_url').hover(function() { 
    $(this).css('cursor', 'pointer'); 
}); 

$(".target_url").click(function() { 
    var url = $(this).html(); 
     $.ajax(
     { 
      url: "post_results.php", 
      type: "POST", 

      data: { "blogger": url}, 
      success: function(data) { 
       //console.log(data); 
       response = $.parseJSON(data); 

       $(function() { 
        $.each(response, function(i, item) { 
        var $tr = $(".target_url").append('<tr>' + 
        $('<td>').text(item.NAME), 
        $('<td>').text(item.POST_URL), 
        $('<td>').text(item.POST_DATE) 
        + '</tr>' 
        ); 
        }); 
       }); 

      }, 
      error: function(xhr, status, error) { 
      console.log("not working"); 
      }, 
      dataType: 'text' 
     }); 
}); 
});

此代碼將查詢的數據插入到原始表的第一列的所有字段中。很明顯，我需要將它添加到最初單擊的行的下面，作爲新的單獨的表格行。我認爲這應該像使用正確的選擇器一樣簡單，但我只使用jquery做了一些相當基本的表單驗證。

會很感激的幫忙！謝謝

來源

2016-11-25 D.Wells

使用此fiddle它可以幫助。

JS：

var data = 
     [{ id: 1, NAME: 'abc', POST_URL: 'qwert', POST_DATE: '123', }, 
     { id: 2, NAME: 'xyz', POST_URL: 'poiuy', POST_DATE: '456' }, 
     { id: 3, NAME: 'pqr', POST_URL: 'vbnmj', POST_DATE: '123' }]; 

     $('.target_url').click(function() { 
        var url = $(this).html(); 
        $.each(data, function(i, item) { 
        var $tr=$('<tr></tr>'); 
        $tr.append($('<td></td>',{text : item.NAME})); 
        $tr.append($('<td></td>',{text : item.POST_URL})); 
        $tr.append($('<td></td>',{text : item.POST_DATE}));       
        $('.target_url').find('tbody').append($tr); 
}); 
});

來源

2016-11-25 12:06:23 RonyLoud

行旁邊非常感謝，真的很有幫助！ –

將您的表ID添加到選擇器。應該完成這項工作。

#tableid// your table id 

var $tr = $("#tableid").append('<tr>' + 
        $('<td>').text(item.NAME), 
        $('<td>').text(item.POST_URL), 
        $('<td>').text(item.POST_DATE) 
        + '</tr>' 
        );

來源

2016-11-25 11:41:16

使用這樣的：我希望這將作品：

 $(".target_url").click(function() { 
     var CurEvent=$(this); 
     var url = $(this).html(); 
     $.ajax(
     { 
     url: "post_results.php", 
     type: "POST", 

     data: { "blogger": url}, 
     success: function(data) { 
      //console.log(data); 
      response = $.parseJSON(data); 

      $(function() { 
       $.each(response, function(i, item) { 
       var $tr = $(CurEvent).after('<tr>' + 
       $('<td>').text(item.NAME), 
       $('<td>').text(item.POST_URL), 
       $('<td>').text(item.POST_DATE) 
       + '</tr>' 
       ); 
       }); 
      }); 

     }, 
     error: function(xhr, status, error) { 
     console.log("not working"); 
     }, 
     dataType: 'text' 
    }); 
    });

來源

2016-11-25 11:46:13

感謝輸入，好像添加到同一行，但並沒有顯示所有數據:( –

我想這段代碼添加了行你點擊 –

動態插入json數據行到現有表

回答

相關問題