动态插入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数据行到现有表

回答

相关问题