Searching for the next table after a clicked element

2

Hello, I'm trying to fill in the next table closest to the clicked button, but I'm not getting it.

It's important to be the next soon after, as there are several tables with the same class, can you help me?

Here's the javascript:

 $(".btnMostrarCategoria").click(
        function() {

            var nome = $(this).data('nome');

            jQuery("#tabelaUploads tbody").html("");

            console.log($(this).next("table"));

            $.ajax({
              url: "/painel/mostrarUploadsCategorias",
              method: 'POST',
              data: {_token: jQuery(".token").val(), nome: nome},

              success: function(e) {
                console.log(e);
                e.forEach(function(item, indice) {
                    //remove o diretório da string e só deixa o nome final do arquivo
                    var nomeArquivo = item.replace('public/painel/categorias/' + nome + "/", ""); 
                    $(this).find('.tabelaUploads tbody').append("<tr><td>" + nomeArquivo + "</td> <td><a class='btn btn-success' href=\"/painel/fazerDownload/" + nome + "/" + nomeArquivo + "\">Download</a> <button type='button' class='btn btn-danger' onclick=\"excluirUpload('" + item + "')\">Excluir</button></td></tr>");
                });
              }
            }).done(function() {        //só abre o modal assim que terminar a requisição ajax
                hidePleaseWait();
            });
        }
    );

HTML:

@foreach($categorias as $categoria)
                    @if($loop->first)
                      <div class="box"><!-- Usar [.box collapsed-box] nos demais -->
                    @else
                      <div class="box collapsed-box"><!-- Usar [.box collapsed-box] nos demais -->
                    @endif

                      <div class="box-header with-border">

                        <input type="hidden" name="" id="nomeCategoria" value="{{$categoria->nome}}">
                        <h3 class="box-title" data-widget="collapse">{{$categoria->id}}  -  {{ $categoria->nome }}</h3>

                        <div class="box-tools pull-right">
                          <button type="button" class="btn btn-box-tool btnMostrarCategoria" data-widget="collapse" data-toggle="tooltip" title="Collapse" data-nome={{ $categoria->nome }}>
                            @if($loop->first)
                              <i class="fa fa-minus"></i></button>
                            @else
                              <i class="fa fa-plus"></i></button>
                            @endif

                        </div>
                      </div>

                      <div class="box-body">
                        <div class="form-group" id="uploadtr">
                            <input type="hidden" id="idPasta">
                            <br>
                              <input type="file" name="files[]" id="fileupload" data-token="{!! csrf_token() !!}" data-pasta="" class="btn btn-primary" multiple ><br/>

                              <div id="progress" class="progress" role="progressbar">
                                  <div class="progress-bar progress-bar-success" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">
                                      <span id="progressValue">0%</span>
                                  </div>
                              </div>
                              <span id="mensagemFinalUpload" style="color: #367fa9">Arquivo enviado com sucesso!</span>
                        </div>

                        <table class="table table-bordered table-striped table-hover" class="tabelaUploads" data-teste="whatever">
                            <thead>
                                <tr>
                                    <th width="85%">Arquivo</th>
                                    <th width="15%">Ações</th>
                                </tr>
                            </thead>

                            <tbody>
                            </tbody>
                        </table>
                      </div>

                    </div>
              <!-- /forelse categoria -->
               @endforeach
              <!-- /.box -->
insira o código aqui
    
asked by anonymous 08.11.2017 / 01:02

1 answer

1

Hello, good evening.

In order to select the table closest to your button, I would recommend you create a div for each created category, in that you would group all the buttons and their respective table to this div, so you would be able to use the < a href="https://api.jquery.com/closest/"> closest available in the library jQuery .

I've set an example so you can clear up your questions: link

    
08.11.2017 / 02:35