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