javascript – Remove from a table and insert that same row in another table

Question:

How can I remove a row from a table, clicking on an icon check, and clicking on the icon, delete the task with id="nextTasks" tasks and add it to the table with id="myTasks"

I managed to remove from a table, but not add to another. What can I do?

I can't use jquery…. Javascript only

Here's the code I've already made:

<!DOCTYPE html>
    <html>
    <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/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 javaScript 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, Prepare Adoption Campaign, in another table whose id="myTasks"

Answer:

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

Post Views: 2
Scroll to Top