1

Boa Noite pessoal. Tenho uma tabela aqui, e as linhas e itens são adicionados dinamicamente através de um botao, a ideia do projeto é um gerenciador de tarefas (Tenho que fazer).

Tenho um botao de adicionar Em cada item que eu adicionar, preciso saber como identificar esse item para que possa ser removido. Ou seja, queria um botao em cada linha, alinhado ao 'Editar' para que eu possa remover ou alterar os dados desse item que esta na tabela. Mas nao consegui encontrar uma resposta pesquisando.

O Meu codigo eh esse

<!DOCTYPE html>
<html lang="pt-br">

<head>
insira o código aqui
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id='AddTask'>

        <h1> Adicionar uma tarefa</h1>

        <form>
            <br><br>TaskName: <input type="text" name="" id="tNome">
            <br><br>Descrição: <input type="text" name="" id="tDescricao">
            <br><br>Prioridade:

            <!-- Labels -->
            <label for="High">High</label>
            <input type="radio" name="radPriority" id='rHigh'>
            <label for="Normal">Normal</label>
            <input type="radio" name="radPriority" id="rNormal">
            <label for="Low">Low</label>
            <input type="radio" name="radPriority" id="rLow"><br><br>
            <input type="button" value="Adicionar Tarefa" onclick='startAddTask()'>
            <!--- Over Label -->

        </form>

        <br><br><br><br>

        <div id='resp'>
            <table id='tb'>
                <tr>
                    <th> Nome </th>
                    <th style='width:90px'> Descrição </th>
                    <th> Prioridade </th>
                    <th> Status </th>
                    <th> Editar </th>
                </tr>

            </table>
        </div>
    </div>

    <script>
    class CreateTabs {
        constructor() {
            //Form Inputs
            this.tNome = document.getElementById('tNome');
            this.tDescricao = document.getElementById('tDescricao');
            //Rad Vars
            this.radLow = document.getElementById('rLow');
            this.radHigh = document.getElementById('rHigh');
            this.radNormal = document.getElementById('rNormal');
            this.tab = document.getElementById('tb');

            //Getting The Forms Info

            this.tNomeValue = this.tNome.value

            this.tDescricaoValue = this.tDescricao.value

        }

        create() {
            this.row1 = this.tab.insertRow(1);
            this.col1 = this.row1.insertCell(0);
            this.col2 = this.row1.insertCell(1);
            this.col3 = this.row1.insertCell(2);
            this.col4 = this.row1.insertCell(3);
            this.col5 = this.row1.insertCell(4);

            if (this.radLow.checked){
                this.Prio = 'Low';
            } else if (this.radNormal.checked) {
                this.Prio = 'Normal';
            } else if (this.radHigh.checked){
                this.Prio = 'High';
            } else {
                this.Prio = '';
            }

            this.col1.innerHTML = this.tNome.value;
            this.col2.innerHTML = this.tDescricao.value;
            this.col3.innerHTML = this.Prio;

        }

        checkRad() {
            if (radLow.checked) {
                alert("Low");
            } else if (radHigh.checked) {
                alert('High');
            } else if (radNormal.checked) {
                alert('Normal');
            } else {
                alert('Você precisa Selecionar um dos Campos');
            }
        }

    } //FIM CLASSE

    function startAddTask() {
        control = new CreateTabs();
        control.create();
    }
    </script>
</body>

</html>

CSS:

body {
        background-color: silver;
    }

    div#AddTask {
        width: 90%;
        height: 100%;
        background-color: #333;
        padding: 40px;
        margin: auto;
        color: white;
    }

    #resp {
        width: 100%;
        height: 200px;
        background-color: white;
        margin: auto;
        color: black;
        overflow-x: hidden;
    }

    form {
        text-align: center;
        margin: auto;
    }

    #AddTask h1 {
        text-align: center;
    }

    /* TABLE  */
    table {
        width: 100%;
        border-collapse: collapse;
        position: relative;
    }

    th,td {
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        padding: 8px;
        text-align: left;
    }

    td {
        font-size: 15px;
        font-family: 'Courier New', Courier, monospace;
        overflow-wrap: break-word; 
        width: 5px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
7
  • Cara mas se nem seu código de adicionar está funcionando como que vc quer ajuda para remover?
    – hugocsl
    Commented 21/09/2019 às 0:04
  • como assim? o codigo de adicionar esta funcionado sim Commented 21/09/2019 às 0:16
  • desculpa, na função create() remove o this.col3 = Commented 21/09/2019 às 0:19
  • eh que eu taava testando varias coisas, acabei esquecendo de tirar isso Commented 21/09/2019 às 0:19
  • ja editei a pergunta e arrumei foi mal Commented 21/09/2019 às 0:20

1 Resposta 1

1

Cara fiz assim, dentro do construtor das colunas eu coloquei para criar um botão na col5, esse btn quando clicar vai tem um forEach() pra pegar o pai do pai (pq o pai é a td, mas eu quero a tr), e na tr eu vou dar um .remove(). Não sei se é a forma mais elegante de fazer mas funciona!

class CreateTabs {
    constructor() {
        //Form Inputs
        this.tNome = document.getElementById('tNome');
        this.tDescricao = document.getElementById('tDescricao');
        //Rad Vars
        this.radLow = document.getElementById('rLow');
        this.radHigh = document.getElementById('rHigh');
        this.radNormal = document.getElementById('rNormal');
        this.tab = document.getElementById('tb');

        //Getting The Forms Info

        this.tNomeValue = this.tNome.value

        this.tDescricaoValue = this.tDescricao.value

    }

    create() {
        this.row1 = this.tab.insertRow(1);
        this.col1 = this.row1.insertCell(0);
        this.col2 = this.row1.insertCell(1);
        this.col3 = this.row1.insertCell(2);
        this.col4 = this.row1.insertCell(3);
        this.col5 = this.row1.insertCell(4);

        if (this.radLow.checked) {
            this.Prio = 'Low';
        } else if (this.radNormal.checked) {
            this.Prio = 'Normal';
        } else if (this.radHigh.checked) {
            this.Prio = 'High';
        } else {
            this.Prio = '';
        }

        this.col1.innerHTML = this.tNome.value;
        this.col2.innerHTML = this.tDescricao.value;
        this.col3.innerHTML = this.Prio;
        this.col5.innerHTML = '<button class="fecha">X</button>';

    }

    checkRad() {
        if (radLow.checked) {
            alert("Low");
        } else if (radHigh.checked) {
            alert('High');
        } else if (radNormal.checked) {
            alert('Normal');
        } else {
            alert('Você precisa Selecionar um dos Campos');
        }
    }

} //FIM CLASSE


function startAddTask() {
    control = new CreateTabs();
    control.create();

    let btn = document.querySelectorAll('.fecha');

    function remove(bt) {
        let pai = bt.currentTarget.parentElement.parentElement;
        pai.remove();
    }

    btn.forEach(function(e) {
        e.addEventListener('click', remove);
    })

}
body {
    background-color: silver;
}

div#AddTask {
    width: 90%;
    height: 100%;
    background-color: #333;
    padding: 40px;
    margin: auto;
    color: white;
}

#resp {
    width: 100%;
    height: 200px;
    background-color: white;
    margin: auto;
    color: black;
    overflow-x: hidden;
}

form {
    text-align: center;
    margin: auto;
}

#AddTask h1 {
    text-align: center;
}

/* TABLE  */
table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

th,
td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

td {
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    overflow-wrap: break-word;
    width: 5px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<div id='AddTask'>

    <h1> Adicionar uma tarefa</h1>

    <form>
        <br><br>TaskName: <input type="text" name="" id="tNome">
        <br><br>Descrição: <input type="text" name="" id="tDescricao">
        <br><br>Prioridade:

        <!-- Labels -->
        <label for="High">High</label>
        <input type="radio" name="radPriority" id='rHigh'>
        <label for="Normal">Normal</label>
        <input type="radio" name="radPriority" id="rNormal">
        <label for="Low">Low</label>
        <input type="radio" name="radPriority" id="rLow"><br><br>
        <input type="button" value="Adicionar Tarefa" onclick='startAddTask()'>
        <!--- Over Label -->

    </form>

    <br><br><br><br>

    <div id='resp'>
        <table id='tb'>

            <tr>
                <th> Nome </th>
                <th style='width:90px'> Descrição </th>
                <th> Prioridade </th>
                <th> Status </th>
                <th> Editar </th>
            </tr>

        </table>
    </div>
</div>

6
  • @LuanGabriel fico feliz de ter ajudado! Eu ainda sou junior no JS se é que posso dizer isso, então não sei se esse .currentTarget.parentElement.parentElement é a melhor maneira, mas que funciona funciona rss. Sucesso ai
    – hugocsl
    Commented 21/09/2019 às 0:57
  • sabes me informar como posso criar um botao de editar para editar os atributos que estao abaixo de TH ou seja, embaixo do titulo ? Posso criar uma nova pergunta pra isso? Commented 21/09/2019 às 0:58
  • @LuanGabriel o que ue faria é onde está '<button class="fecha">X</button>'; eu colocaria '<button class="fecha">X</button><button class="edit">Editar</button>'; e depois faria uma função para esse btn.edit. A função pode ser abrir um modal com as infos da TR algo assim. Então o btn como vc viu é fácil de adicionar. O resto que é difícil... Vai ficar assim: prntscr.com/p8xqcg
    – hugocsl
    Commented 21/09/2019 às 1:00
  • entendi, vou tentar aqui, mas pelo que vc ja me ajudou agradeço demais :) Commented 21/09/2019 às 1:01
  • Cara em último caso, depois que vc tentar e definir como vai ser esse "editar", se vc realmente agarrar, volta ai e faz um pergunta detalhada e com o seu código atual. Mas testa o código antes de postar ok ;) haha Abs
    – hugocsl
    Commented 21/09/2019 às 1:02

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 .