Estou com um código que tem gera uma tabela com nomes de alunos e ao lado de cada nome um botão "detalhes". O objetivo é que ao clicar nesse botão abra uma pequena table ao lado do botão com as notas dos alunos. As função que retorna a nota de cada aluno funciona, só não consigo fazer com que o resultado da função apareça dentro do popover. Obs: A table com as notas de cada aluno deve ficar ao lado do seu nome, assim quanto mais a baixo ou a cima estiver o nome do aluno a table deve aparecer ao lado do botão.
2 Respostas
Para mostrar a resposta de uma função dentro de um popover, siga os passos abaixo:
Crie um evento de "clique" no botão "detalhes", e declare (dentro deste evento) que você deseja exibir as notas dos alunos quando este botão for pressionado.
Supondo que você não saiba como fazer isso... Primeiro, adicione ao botão de "detalhes", um evento que reconheça o clique, como mostro abaixo:
document.querySelector('#botao_detalhes').addEventListener('clique', function() {
// Este código mostra o resultado da função e mostra as notas dos alunos, dentro do popover
});
Depois, crie uma função que retorna as notas de cada aluno e uma variável que armazene os resultados:
const notas = obter_nota_de_cada_aluno();
Por último, só o que você precisará fazer é exibir o resultado da função no popover com o método innerHTML (que vai configurar o conteúdo HTML), veja:
document.querySelector('#seu_popover').innerHTML = notas_dos_alunos;
Para exibir o resultado da função dentro do popover, você pode usar o evento click do jQuery para detectar quando o botão "detalhes" é clicado e, em seguida, chamar a função que retorna as notas do aluno. Você também pode usar a função html do jQuery para atualizar o conteúdo do popover com o resultado da função.
Veja um exemplo de como fazer isso:
<table>
<tr>
<td>Nome do aluno</td>
<td>
<button class="btn-detalhes" data-aluno="123">Detalhes</button>
<div class="popover">
<!-- Conteúdo do popover -->
</div>
</td>
</tr>
</table>
<script>
$(document).ready(function() {
// Evento de clique no botão "detalhes"
$('.btn-detalhes').click(function() {
// Pega o ID do aluno a partir do atributo "data-aluno"
var idAluno = $(this).data('aluno');
// Chama a função que retorna as notas do aluno
var notas = getNotasAluno(idAluno);
// Atualiza o conteúdo do popover com as notas do aluno
$(this).siblings('.popover').html(notas);
});
});
</script>
Lembre-se de que você também precisará adicionar estilos CSS para posicionar o popover corretamente ao lado do botão.
-
Eu coloquei o return da função para já retornar em html. pc = notas r = "<table border='1px'id ='table'><thead><tr id='celula'>Notas dos quizzes</tr>" for i in range(0,len(pc)): r += ("<th style='text-align:center'id='celula'>%s</th>" %i) r += "</thead><tbody><tr>" for n in pc: if n == '-': r += ("<td id='celula'>-</td>") else: r += ("<td >%.2f</td>" %n) r += "</tr></tbody></table>" Não deu certo ainda, não sei se é por conta do formato que é retornado. Afunção já retorna a table em si pronta. Commented 27/12/2022 às 17:54