1

Criei um sistema de alertas, onde pretendo dar a possibilidade de eliminar o alerta caso seja pretendido.

Tenho a seguinte tabela e botão de eliminar:

<button type="button" name="Delete" Onclick="if(confirm('Tem certeza de que deseja excluir esta Mensagem?')) deletar();" class="btn btn-primary"><i class="glyphicon glyphicon-envelope"></i><i class="glyphicon glyphicon-remove-sign"></i></button>

<table class="table table-responsive table-striped table-bordered table-condensed table-hover"> 
 <thead>
   <tr> 
     <th>De</th>
     <th>Assunto</th>
     <th>Prioridade</th>
     <th>Recebido</th>                
   </tr>
 </thead>
 <thead>
   <tr>
     <?php  
       do{
         if($nomede != $produto["De"]){
    ?>  
    <th width="10%" colspan=4>Recebido: <?php echo $produto["Data"]; ?></th>
     <?php
        $nomede = $produto["De"];
        }
    ?>
     </tr>
 </thead>
 <tbody>
     <tr>  
      <td><?php echo $produto["De"]; ?></td>
      <td class="td-info view_data apagar" id="<?php echo $produto["Id"]; ?>,<?php echo $produto["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto["Assunto"]; ?></td>  
      <td><?php echo $produto["Prioridade"]; ?></td> 
      <td><?php echo $produto["Hora"]; ?></td>
    </tr>
<?php } while($produto = $resultado_cursos->fetch_assoc()); ?>
   </tbody>
</table>

Para eliminar pretendo que selecionem a linha, mudando a cor da linha ao selecionar para depois eliminar, para isso estou a fazer da seguinte forma:

function deletar(){
    var ids = []; //arraypara armazenar os id's a serem deletados
    $(".colorir").each(function(){ //percorre todos os tr que possui a classe colorir
        ids.push($(this).find(".apagar").attr("Id")); //adiciona o id da linha ao array
        $(this).remove();
    })

    $.ajax({
        url: './deletealerta',
        type: 'POST',
        cache: false,
        data: {ids:ids},
        error: function(){

        },
        success: function(result)
        { 
        }
    });
}

css:

.colorir {
    background-color:#81BEF7;
}

O problema que tenho é que não seleciona a linha na tabela para identificar o id e poder eliminar ao clicar no botão para eliminar. A única linha que seleciona é a linha que faz a separação pela data como mostro na imagem:

inserir a descrição da imagem aqui

Mas essa linha que faz separação da data nem faz sentido selecionar porque não a consigo eliminar. Não estou a encontrar o problema

4
  • Olá amigo. Adicione Tag php por favor. Commented 19/07/2019 às 12:29
  • 1
    Bruno, pode colocar na pergunta o código javascript que faz marcar a linha? não achei isso nem um evento no html tbm Commented 22/07/2019 às 10:44
  • Coloca um checkbox em cada linha e depois pega somente os valores das linhas que estão com o checkbox marcados. Commented 24/07/2019 às 2:21
  • Javascript é case sensitive, errado: Onclick || correto: onclick, estou verificanco o restante do código Commented 26/07/2019 às 10:29

1 Resposta 1

1
+50

Segue esse exemplo prático que você deverá adequar com o PHP para:

  • inserir o "id" e a classe "linha" na "tboby tr"

Alteração De: Onclick // Para: onclick

gravei os ID's no array "arrIDS" para você enviar por ajax e remover os alertas do banco de dados, ou efetue o que desejar.

exemplo no Codepen: https://codepen.io/programano/pen/RXGOXV

const tr = document.querySelectorAll('tr.linha');
for ( const t of tr){
  t.addEventListener('click',()=>{
    t.classList.toggle("colorir");
  });
}
function deletar(){
  const linhas = document.querySelectorAll('.colorir');
  const arrIDS = [].map.call(linhas,(obj)=>{return obj.id;});
  for( const ln of linhas ){
    ln.remove();
  }
  console.log('ids: '+arrIDS); // retorna os ids das linhas ids: 15,12
  document.getElementById('resp').innerHTML = '( <strong class="red">ids:</strong> '+arrIDS+' )';
}
.colorir {background-color:#81BEF7;}
.linha { cursor:pointer}
.linha:hover { background-color:salmon;}
.red { color:red; }
<button type="button" name="Delete" onclick="if(confirm('Tem certeza de que deseja excluir esta Mensagem?')) deletar();" class="btn btn-primary">
		<i class="glyphicon glyphicon-envelope"></i>
		<i class="glyphicon glyphicon-remove-sign"></i>
		apagar
	</button>

	<table class="table table-responsive table-striped table-bordered table-condensed table-hover"> 
		<thead>
			<tr> 
				<th>De</th>
				<th>Assunto</th>
				<th>Prioridade</th>
				<th>Recebido</th>              
			</tr>
		</thead>
		<tbody>
			<tr id="15" class="linha">  
				<td>Bruno</td>
				<td class="td-info view_data apagar" id="15|19" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold; font-size: 90%">teste</td>  
				<td>média</td> 
				<td>10:20h</td>
			</tr>
			<tr id="22" class="linha">  
				<td>Bruno</td>
				<td class="td-info view_data apagar" id="22|30" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:normal; font-size: 90%">teste</td>  
				<td>média</td> 
				<td>10:20h</td>
			</tr>
			<tr id="12" class="linha">  
				<td>Bruno</td>
				<td class="td-info view_data apagar" id="12|79" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold; font-size: 90%">teste</td>  
				<td>média</td> 
				<td>10:20h</td>
			</tr>
		</tbody>
	</table>
<div id="resp"></div>

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 .