dynamically inserting rows of json data into existing table

Question

So I have a database results page displaying rows of data from one of my tables. I'm trying to implement a feature whereby if a user clicks on a certain row, additional data pertaining to that FK in another table will show up as rows of data beneath the clicked row, but above the next row of the original table. From what I've read there is no animation available for this- as long as it just appears in the right place I'll be happy. They can then be clicked again to hide.

I've already coded the on click function and have json data returning with the SQL queried data; I just don't know how to implement this feature with jquery as a javascript & jquery newcomer. Here is my attempt:

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

This code inserts the queried data into the ALL the fields of the first column of the original table. Obviously I need it added below just the originally clicked row, as a new seperate table row. I think this should be as simple as using the right selectors but I have only done some fairly basic form validation with jquery.

Would be really grateful for help! Thanks

RonyLoud · Accepted Answer · 2016-11-25 12:06:23Z

2

Use this fiddle it may help.

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);
});
});

answered Nov 25, 2016 at 12:06

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.Wells Over a year ago

Thanks a lot, really really helpful!

Srinivas B · Accepted Answer · 2016-11-25 11:41:16Z

0

add your table id to the selector. that should do the job.

#tableid// your table id

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

answered Nov 25, 2016 at 11:41

Srinivas B

968 bronze badges

Comments

SURJEET SINGH Bisht · Accepted Answer · 2016-11-25 11:46:13Z

0

use this :i hope it will works :

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

answered Nov 25, 2016 at 11:46

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

2 Comments

D.Wells Over a year ago

thanks for the input, it seems to add to the same row though and does not display all the data :(

SURJEET SINGH Bisht Over a year ago

i thought this code will add row next to the row you clicked

Collectives™ on Stack Overflow

dynamically inserting rows of json data into existing table

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related