3

Como é que posso remover uma linha de uma tabela, clicando num icon check, e ao clicar no icon, apaga a tarefa com id="proximasTarefas" tarefas e adiciona na tabela com id="minhasTarefas"

Consegui remover de uma tabela, mas não adicina noutra. O que posso fazer?

Não posso usar jquery.... Somente Javascript

Segue o código que já fiz:

<!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
    </head>
    <body>
    <table class="table table-striped" id="proximasTarefas">
                                                            <thead>
                                                                <tr>
                                                                    <th>Tarefa</th>
                                                                    
                                                                    <th>Ações</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Preparar a campanha de adoção</td>
                                                                    <td class="text-center"><i class="fa fa-check"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Contactar os adotantes da Mamã</td>
                                                                    <td class="text-center"><i class="fa fa-check"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Levar o Zazu ao veterinário</td>
                                                                    <td class="text-center"><i class="fa fa-check"></i></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Consultar a FAT da ninhada de Garfe</td>
                                                                    <td class="text-center"><i class="fa fa-check"></i></td>
                                                                </tr>
                                                                
                                                                
                                                                
                                                                    
                                                            </tbody>
                                                        </table>

    </body>
 </html>

O javaScript que fiz para remover foi este:

function removeLinha(linha) {
              var i=linha.parentNode.parentNode.rowIndex;
              document.getElementById('tabProximasTarefas').deleteRow(i);
            }            

Mas queria colocar a tarefa que exclui, por exemplo, Preparar a campanha de adoção, noutra tabela cujo id="minhasTarefas"

2 Respostas 2

0

Acho que assim deve funcionar:

function trocaLinha(linha) {
    var conteudo = linha.innerHTML;
    var i=linha.parentNode.parentNode.rowIndex;
    document.getElementById('tabProximasTarefas').deleteRow(i);
    //ou linha.remove();
    var novaLinha = document.getElementById('tabMinhasTarefas').insertRow();
    novaLinha.innerHTML = conteudo;
}

Abraços

2
0

<!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
    <script>
    function trocaLinha(linha) {
        var conteudo = linha.innerHTML;
        linha.remove();
        var novaLinha = document.getElementById('minhasTarefas').insertRow();
        novaLinha.innerHTML = conteudo;
    }
	</script>
    </head>
    <body>
	<h1>Proximas tarefas</h1>
    <table class="table table-striped" id="proximasTarefas">
		<thead>
			<tr>
				<th>Tarefa</th>
				
				<th>Ações</th>
			</tr>
		</thead>
		<tbody>
			<tr onclick="trocaLinha(this);">
				<td>Preparar a campanha de adoção</td>
				<td class="text-center"><i class="fa fa-check"></i></td>
			</tr>
			<tr onclick="trocaLinha(this);">
				<td>Contactar os adotantes da Mamã</td>
				<td class="text-center"><i class="fa fa-check"></i></td>
			</tr>
			<tr onclick="trocaLinha(this);">
				<td>Levar o Zazu ao veterinário</td>
				<td class="text-center"><i class="fa fa-check"></i></td>
			</tr>
			<tr onclick="trocaLinha(this);">
				<td>Consultar a FAT da ninhada de Garfe</td>
				<td class="text-center"><i class="fa fa-check"></i></td>
			</tr>
			
			
			
				
		</tbody>
	</table>
	<h1>Minhas tarefas</h1>
	<table class="table table-striped"  id="minhasTarefas">
		<thead>
			<tr>
				<th>Tarefa</th>
				
				<th>Ações</th>
			</tr>
		</thead>
	</table>
    </body>
 </html>

1
  • Olá :) O seu código funcionou, mas como é que eu faço para mudar o icon para trash?? 30/11/2018 às 12:42

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 .