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