Question

所以我有一个数据库结果页面显示来自我的一个表的数据行。我试图实现一项功能，即如果用户点击某一行，则另一个表中与该FK相关的其他数据将显示为所单击行下方的数据行，但会高于原始表的下一行。从我所读过的内容来看，没有可用于此的动画 - 只要它出现在正确的地方，我就会感到高兴。然后可以再次单击它们以隐藏它们。

我已经编写了on click函数，并使用SQL查询数据返回json数据;我只是不知道如何使用jquery作为javascript＆amp; amp;来实现此功能。 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添加到选择器。应该做的工作。

{ Object.keys(subjects).map((item, i) => (
   <li className="travelcompany-input" key={i}>
     <span className="input-label">key: {i} Name: {subjects[item]}</span>
    </li>
))}

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

动态地将json数据行插入到现有表中

3 个答案: