尝试使用jquery删除表中不是第一行的行

时间:2018-06-13 23:20:00

标签: php jquery laravel-blade

我在laravel项目中有一个关于jquery和modal的问题(这里是一个刀片文件)。我有几个艺术家的桌子,每行参考一个艺术家。还有一个列删除。对于艺术家的每一行,当我点击删除时,模态出现询问我是否肯定取消等...我可以删除第一位艺术家,但如果我选择另一位艺术家,则它不起作用。我想我必须接受艺术家的身份,但我不知道如何,有人可以提供帮助吗? 感谢

<div class="col-md-8">
    <table class="table table-bordered table-striped table-condensed css-serial">
        <div class="btn pull-right col-md-4">
            <a class="btn btn-primary" href="{{ route('create-artist') }}" role="button">Create a new Artist or Band</a>
        </div>
        <thead>
        @if(!$artists->isEmpty())
            <h1>ARTISTS & BANDS:</h1>
            <tr>
                <th>#</th>
                <th>Artist</th>
                <th>Music genre</th>
                <th>Picture</th>
                <th>Edition</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        @foreach ($artists as $artist)
            <form>
                <tr>
                    <td></td>
                    <td>{{ $artist->artist_name}}</td>
                    <td>{{ $musicgenres[$artist->music_genre]}} </td>
                    <td><img src="../images/uploads/pictures_band/{{$artist->picture}}" style="width:80px; height:80px; border-radius:50%;" ></td>
                    <td><a href="{{ route('edit-artists', ['id' => $artist->id]) }}" class="btn btn-success" id="bt">Show</a></td>
                    <td><a class="btn btn-danger" id="delete_id">Remove</a></td>
                </tr>
            </form>
            <div id="delete-confirm" class="modal"  data-backdrop="static" data-keyboard="true">
                <div class="vertical-alignment-helper">
                    <div class="modal-dialog vertical-align-center">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title  text-center">Warning</h4>
                            </div>
                            <div class="modal-body">
                                <p class="text-center">Are you sure you want to delete this Artist ? It will delete Tour and concert belong to this artist !</p>
                                <form action="{{ route('delete-artists', ['id' => $artist->id] )}}">
                                    <div class="text-center" >
                                        <button type="submit" class=" btn btn-primary "  > Okay</button>
                                        <button type="button" class=" btn btn-primary " data-dismiss="modal" > Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        @else
            <h3>'There is no artist or band yet !'</h3>
        @endif
        </tbody>
    </table>
</div>

<script>
    $('#delete_id').on('click',function(){
        //var id = $(this).attr('id')
        $('#delete-confirm').modal('show');
    });
</script>

1 个答案:

答案 0 :(得分:0)

你的删除按钮有一个id,但问题是(很可能)你会有很多按钮。 id应该具有一个特定元素。在我之前的经历中它打破了一些事情(关于模态),所以我建议你把它改成一个类。之后你必须修改你的js以显示连接到你的艺术家按钮的正确模态。