既存のテーブルにjsonデータの行を動的に挿入

Question

したがって、私は自分のテーブルからデータの行を表示するデータベース結果ページを持っています。ユーザーが特定の行をクリックすると、別のテーブルのそのFKに関連する追加データが、クリックされた行の下の行の行に表示され、元の表の次の行の上に表示されるという機能を実装しようとしています。私が読んだことから、アニメーションは利用できません。ちょうどいい場所に現れれば、私は幸せになれます。その後、再びクリックして非表示にすることができます。

私は既にオンクリック機能をコーディングしており、jsonデータがSQLの照会されたデータで返されるようにしました。私はちょうどjavascript & jquery newcomerとして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を使ってかなり基本的なフォーム検証を行っているだけです。

本当に助けに感謝しますか？ おかげ

Answer 1

それが役立つことがあり、この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); 
}); 
}); 

Answer 2

は、セレクタにあなたのテーブル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>' 
        ); 

Answer 3

使用この：

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