Question

我正在尝试使用AJAX JQuery在用户列表中显示用户详细信息，但它无法正常工作。它适用于我在同一tr中的第一个细节，但不适用于第二行td中的第二个细节。我该怎么做呢？

以下是代码：

我的观点：

<table class="table">
        <thead>
            <th>#</th>
            <th>name</th>
            <th>password</th>
            <th></th>
        </thead>
        <tbody>
        @foreach($users as $user)
            <tr>
                <table class="table">
                    <tr>
                        <td>{{$user->id}}</td>
                        <td>{{$user->name}}</td>
                        <td>{{$user->password}}</td>
                        <td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td>
                        <td id="details">a</td>
                    </tr>
                    <tr>
                        <td colspan="5" id="details">a</td>
                    </tr>
                </table>
            </tr>
        @endforeach  
        </tbody>       
    </table>

和我的剧本：

    $(".extend-user").click(function() {
    var self = this;

    if($(self).data("details")===0)
    $.ajax({
        method: "POST",
        url: $(self).data("url"),
        data: {
            _token: $("#_token").val()
        },
        success: function(data) {
            $(self).parents().find("#details").append(data["name"]);
            //$(self).parent().parent().find("#details").append(data["name"]);
            //$(self).closest('table').find("#details").append(data["name"]);;
            $(self).data("details", "1");
        }
    });
    if($(self).data("details")===1) {
        $(self).data("details", "0");
        $(self).parent().find("p.details").html("");
    }
});

Answer 1

尝试使用$(self).closest("table").find("#details").append(data["name"]);

nearest会找到您要查找的最接近的父元素。

Answer 2

替换

DateTime

与

$(self).parents().find("#details").append(data["name"]);

.parents（）无法在桌面

2 个答案: