0

Bom dia amigos, estou quebrando a cabeça com uma coisa que parece ser simples. Eu tenho uma tabela que contém checkbox, criei uma função que ao clicar na linha marca o checkbox também e "pinta" o background da linha para mostrar que está marcado, porém, só está destacando um único campo da linha, e eu gostaria que fosse a linha inteira... Nesta mesma tabela tenho um checkbox que ao ser marcado, marca todos os checkboxes da tabela e, aí sim, "pinta" todas as linhas da tabela por completo... Alguém poderia me ajudar?

<div class="row">
<div class="col-12">
    <div class="table-responsive">
    //checkbox que marca todos os outros
    <input type="checkbox" class="checkTodos" onclick="marcardesmarcar();">Selecionar todos

        <table class="table table-striped table-bordered table-sm" id="tabelaSelecionavel">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Descrição</th>
                    <th scope="col">Fornecedor</th>
                    <th scope="col">Nr Nota</th>
                    <th scope="col">Valor Nota</th>
                    <th scope="col">Dt Nota</th>
                    <th scope="col">Valor Pago</th>
                    <th scope="col">Dt de Pagamento</th>             
                </tr>
            </thead>

            <tbody id="table-body">
                @foreach ($titulospagar as $titulos)
                     <tr style="cursor: pointer;" title="Click para selecionar" id="selecionavel">
                        <td class="table-truncate text-left"><input type="checkbox" value="{{$titulos->planoconta->DsConta}}" onclick="a(this)" class="linha">{{($titulos->planoconta->DsConta)}}</td>
                        <td class="table-truncate">{{($titulos->fornecedor->NmFantasia)}}</td>
                        <td class="table-truncate text-right">{{($titulos->NrNF)}}</td>
                        <td class="table-truncate text-right dinheiro">{{number_format($titulos->fornecimento->VlTotal , 2,',','.')}}</td>
                        <td class="table-truncate text-right">{{($titulos->fornecimento->DtCompra)}}</td>
                        <td class="table-truncate text-right dinheiro">{{number_format($titulos->VlPrev , 2,',','.')}}</td>
                        <td class="table-truncate text-right">{{($titulos->DtPrev)}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

    </div>
</div>

Aqui estão as funções em JavaScript, comentei as funções para tentar explicar melhor, espero que fique claro e que alguém possa me ajudar

    var selecionavel = document.getElementById("selecionavel");
    var checkTodos = document.getElementById("checkTodos");

    //função que muda a cor de fundo da linha marcada
    function a(b){
        (b.checked==true) ? b.parentNode.style.background='grey' : b.parentNode.style.background='none';
    }

    //função que muda a cor de fundo de todas as linhas ao marcar todos
    $(".checkTodos").on("change", function () {
        a(this);
    });

    //função que marca/desmarca todos os checkbox
    function marcardesmarcar(){
            $('.linha').each( //pega a classe do checkbox
                function() {
                    if ($(this).prop("checked")) {
                        $(this).prop("checked", false);
                    } else {
                        $(this).prop("checked", true);
                    }
                }
            );
        }

    $("#tabelaSelecionavel tr").on("click", function(){
        $(this).children().children()[0].click();
    });

1 Resposta 1

0

Eu fiz desda forma e funcionou aqui, agora se você quiser fazer as validações para quando o check não estiver marcado já pode fazer, está tudo certinho, espero ter ajudado

$("#table-body tr").click(function() {
  $(this).parent()[0].setAttribute("style", "background: grey")
  $("#table-body").parent()[0].children[1].children[0].children[0].children[0].click()

})

$(".checkTodos").click(function() {
  var linha = $("#table-body").length
  console.log(linha)
  for (var i = 0; i < linha; i++) {
    $("#table-body tr")[i].setAttribute("style", "background: grey")
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="table-responsive">
      //checkbox que marca todos os outros
      <input type="checkbox" class="checkTodos" onclick="">Selecionar todos

      <table class="table table-striped table-bordered table-sm" id="tabelaSelecionavel">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Descrição</th>
            <th scope="col">Fornecedor</th>
            <th scope="col">Nr Nota</th>
            <th scope="col">Valor Nota</th>
            <th scope="col">Dt Nota</th>
            <th scope="col">Valor Pago</th>
            <th scope="col">Dt de Pagamento</th>
          </tr>
        </thead>

        <tbody id="table-body">
          @foreach ($titulospagar as $titulos)
          <tr style="cursor: pointer;" title="Click para selecionar" id="selecionavel">
            <td class="table-truncate text-left"><input type="checkbox" value="{{$titulos->planoconta->DsConta}}" onclick="" class="linha">{{($titulos->planoconta->DsConta)}}</td>
            <td class="table-truncate">{{($titulos->fornecedor->NmFantasia)}}</td>
            <td class="table-truncate text-right">{{($titulos->NrNF)}}</td>
            <td class="table-truncate text-right dinheiro">{{number_format($titulos->fornecimento->VlTotal , 2,',','.')}}</td>
            <td class="table-truncate text-right">{{($titulos->fornecimento->DtCompra)}}</td>
            <td class="table-truncate text-right dinheiro">{{number_format($titulos->VlPrev , 2,',','.')}}</td>
            <td class="table-truncate text-right">{{($titulos->DtPrev)}}</td>
          </tr>
          @endforeach
        </tbody>
      </table>

    </div>
  </div>

2
  • Poxa cara, muito obrigado, funcionou muito bem, tudo certinho. Muito obrigado!! Vou fazer sim a validação para quando não estiver marcado. Valeu cara, ajudou muito. Commented 13/12/2019 às 17:25
  • Não foi nada, se precisar estou aqui!
    – Azzi
    Commented 13/12/2019 às 17:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .