Remove from a table and insert that same row into another table

Asked

Viewed 57 times

3

How can I remove a row from a table by clicking on an icon check, and clicking on the icon erases the task with id="next tasks" and adds to the table with id="myTarefas"

I was able to remove it from one table, but I can’t guess another. What can I do?

I cannot use jquery.... Javascript only

Follow the code I’ve already made:

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

The Java I made to remove was this:

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

But I wanted to put the task that excludes, for example, Preparing the adoption campaign, in another table whose id="myTarefas"

javascript html

2 answers

0

I think this should work:

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

Hugs

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>

  • Hello :) Your code worked, but how do I change the icon to Trash??

Browser other questions tagged javascript html

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