Select row in table to delete

Asked

Viewed 219 times

1

I created a warning system, where I want to give the possibility to delete the alert if desired.

I have the following table and delete button:

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

To delete I want you to select the line, changing the color of the line when selecting to then delete, for this I am doing as follows:

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

The problem I have is that it does not select the row in the table to identify the id and can delete by clicking the delete button. The only line you select is the line that separates by date as shown in the image:

inserir a descrição da imagem aqui

But this line that does date separation doesn’t even make sense to select because I can’t delete it. I’m not finding the problem

php jquery

  • Hello friend. Add php tag please.

  • 1

    Bruno, can you put in the question the javascript code that makes mark the line? I didn’t find this nor an event in html tbm

  • Puts a checkbox on each line and then takes only the values of the lines that are with the checkbox marked.

  • Javascript is case sensitive, wrong: Onclick || correct: onclick, I’m checking the rest of the code

1 answer

1


Follow this practical example that you should fit with PHP for:

  • insert "id" and "line" into "tboby tr"

Change From: Onclick // To: onclick

recorded the ID’s in the "arrIDS" array for you to send by ajax and remove database alerts, or do whatever you want.

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

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.