problem by "highlight" selected row with click and checkbox

Question

Good morning friends, I’m breaking my head with something that seems to be simple. I have a table that contains checkbox, I created a function that by clicking on the row marks the checkbox as well and "paints" the background of the row to show that it is marked, however, it is only highlighting a single field of the row, and I would like it to be the whole row... In this same table I have a checkbox that when marked, marks all checkboxes of the table and, there yes, "paints" all rows of the table completely... Could someone help me?

<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>

Here are the functions in Javascript, I commented on the functions to try to explain better, I hope it is clear and that someone can help me

    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();
    });

Answer 1

I made this way and it worked here, now if you want to make the validations for when the check is not scheduled can already do, it’s all right, I hope to have helped

$("#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>