Searching for the next table after a clicked element

Asked

Viewed 52 times

2

Hello, I’m trying to fill the next table closer to the clicked button, but I’m not getting.

It is important that it be the next one right after, because there are several tables with the same class, will they help me??

Here is 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
  • You can use the .parent() until checking on an element that has both the button and the desired table as subelements. Example: $(this).parent().parent().parent().find('.table');.

1 answer

1


Hello, good night.

To be able to select the table closest to your button, I would recommend you create a div for each created category, in this you would group all the buttons and their respective table to that div, with that you would be able to use the command Closest available in the library jQuery.

I made an example so that you can clarify your doubts: https://jsfiddle.net/bh3oj408/

  • Thank you very much for the answer and for the example. It worked right!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.