Excluir linha da tabela com Javascript
16/10/2019
0
Olá sou iniciante, preciso de ajuda em um projeto de estudo de um sistema de estacionamento, estou com dificuldade em criar um botão de excluir em minha tabela, o botão acaba excluindo a tabela inteira, quero que ele delete somente a linha do botão, alguma dica? segue meu código
<!DOCTYPE html>
<html>
<head>
<title>Piloto 1</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<style>
.vagas_letras { background-color: gray;
}
.vagas_n { background-color: gray;
}
</style>
<body>
<form action="">
Cliente:<br>
<input type="text" id="cliente" placeholder="Nome do cliente"><br>
Modelo:<br>
<input type="text" id="modelo" placeholder="Modelo do veículo"><br>
Placa:<br>
<input type="text" id="placa" placeholder="ABC-1234"><br>
Vaga:<br>
<input type="text" id="vaga" placeholder="Z1"><br>
<input type="button" id="botao" value="Confirmar" onclick="adicionar()">
</form>
<br>
<table>
<thead>
<tr>
<td>Cliente</td>
<td>Modelo</td>
<td>Placa</td>
<td>Vaga</td>
<td>Entrada</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="estacionamento" border="2">
<tr class="vagas_n">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">A</td>
<td id="A1">LIVRE</td>
<td id="A2">LIVRE</td>
<td id="A3">LIVRE</td>
<td id="A4">LIVRE</td>
<td id="A5">LIVRE</td>
<td id="A6">LIVRE</td>
<td id="A7">LIVRE</td>
<td id="A8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">B</td>
<td id="B1">LIVRE</td>
<td id="B2">LIVRE</td>
<td id="B3">LIVRE</td>
<td id="B4">LIVRE</td>
<td id="B5">LIVRE</td>
<td id="B6">LIVRE</td>
<td id="B7">LIVRE</td>
<td id="B8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">C</td>
<td id="C1">LIVRE</td>
<td id="C2">LIVRE</td>
<td id="C3">LIVRE</td>
<td id="C4">LIVRE</td>
<td id="C5">LIVRE</td>
<td id="C6">LIVRE</td>
<td id="C7">LIVRE</td>
<td id="C8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">D</td>
<td id="D1">LIVRE</td>
<td id="D2">LIVRE</td>
<td id="D3">LIVRE</td>
<td id="D4">LIVRE</td>
<td id="D5">LIVRE</td>
<td id="D6">LIVRE</td>
<td id="D7">LIVRE</td>
<td id="D8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">E</td>
<td id="E1">LIVRE</td>
<td id="E2">LIVRE</td>
<td id="E3">LIVRE</td>
<td id="E4">LIVRE</td>
<td id="E5">LIVRE</td>
<td id="E6">LIVRE</td>
<td id="E7">LIVRE</td>
<td id="E8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">F</td>
<td id="F1">LIVRE</td>
<td id="F2">LIVRE</td>
<td id="F3">LIVRE</td>
<td id="F4">LIVRE</td>
<td id="F5">LIVRE</td>
<td id="F6">LIVRE</td>
<td id="F7">LIVRE</td>
<td id="F8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">G</td>
<td id="G1">LIVRE</td>
<td id="G2">LIVRE</td>
<td id="G3">LIVRE</td>
<td id="G4">LIVRE</td>
<td id="G5">LIVRE</td>
<td id="G6">LIVRE</td>
<td id="G7">LIVRE</td>
<td id="G8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">H</td>
<td id="H1">LIVRE</td>
<td id="H2">LIVRE</td>
<td id="H3">LIVRE</td>
<td id="H4">LIVRE</td>
<td id="H5">LIVRE</td>
<td id="H6">LIVRE</td>
<td id="H7">LIVRE</td>
<td id="H8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">I</td>
<td id="I1">LIVRE</td>
<td id="I2">LIVRE</td>
<td id="I3">LIVRE</td>
<td id="I4">LIVRE</td>
<td id="I5">LIVRE</td>
<td id="I6">LIVRE</td>
<td id="I7">LIVRE</td>
<td id="I8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">J</td>
<td id="J1">LIVRE</td>
<td id="J2">LIVRE</td>
<td id="J3">LIVRE</td>
<td id="J4">LIVRE</td>
<td id="J5">LIVRE</td>
<td id="J6">LIVRE</td>
<td id="J7">LIVRE</td>
<td id="J8">LIVRE</td>
</tr>
</table>
<script type="text/javascript">
// variaveis globais
var corpo_tabela = document.querySelector('tbody');
var campo_botao = document.createElement('button')
campo_botao.innerHTML = 'Excluir'
function adicionar(){
// Variaveis Principais da função
var cliente_ = document.getElementById('cliente').value;
var modelo_ = document.getElementById('modelo').value;
var placa_ = document.getElementById('placa').value;
var vaga_ = document.getElementById('vaga').value;
var hora_entrada = new Date();
var minutos_entrada = new Date();
var entrada_ = hora_entrada.getHours() + ':' + minutos_entrada.getMinutes();
var campo_botao = document.createElement('button')
campo_botao.innerHTML = 'Excluir'
campo_botao.addEventListener("click", function(){
linha.parentNode.parentNode.removeChild(linha.parentNode);
});
// Validação do formulario
if ((cliente_ == "") || (modelo_ == "") || (placa_ == "") || (vaga_ == "")){
alert ("Preencha os campos vazios")
}
// Validação da vaga
else {
var id = document.getElementById(document.getElementById('vaga').value)
if (id.innerHTML != "LIVRE") {
alert ("Vaga ocupada, favor escolher outra!");
} else {
id.style.background = 'red';
id.innerHTML = placa_;
console.log(id)
// criação das tag html
var linha = document.createElement('tr');
var campo_cliente = document.createElement('td');
var campo_modelo = document.createElement('td');
var campo_placa = document.createElement('td');
var campo_vaga = document.createElement('td');
var campo_entrada = document.createElement('td');
// atribuindo para variavel o texto dos campos do formulario
var texto_cliente = document.createTextNode(cliente_);
var texto_modelo = document.createTextNode(modelo_);
var texto_placa = document.createTextNode(placa_);
var texto_vaga = document.createTextNode(vaga_);
var texto_entrada = document.createTextNode(entrada_);
// inserindo o texto nas tags criadas
campo_cliente.appendChild(texto_cliente);
campo_modelo.appendChild(texto_modelo);
campo_placa.appendChild(texto_placa);
campo_vaga.appendChild(texto_vaga);
campo_entrada.appendChild(texto_entrada);
linha.appendChild(campo_cliente);
linha.appendChild(campo_modelo);
linha.appendChild(campo_placa);
linha.appendChild(campo_vaga);
linha.appendChild(campo_entrada);
linha.appendChild(campo_botao);
corpo_tabela.appendChild(linha);
// limpar formulario
document.getElementById('cliente').value='';
document.getElementById('modelo').value='';
document.getElementById('placa').value='';
document.getElementById('vaga').value='';
}
}
}
</script>
</body>
</html>.
<!DOCTYPE html>
<html>
<head>
<title>Piloto 1</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<style>
.vagas_letras { background-color: gray;
}
.vagas_n { background-color: gray;
}
</style>
<body>
<form action="">
Cliente:<br>
<input type="text" id="cliente" placeholder="Nome do cliente"><br>
Modelo:<br>
<input type="text" id="modelo" placeholder="Modelo do veículo"><br>
Placa:<br>
<input type="text" id="placa" placeholder="ABC-1234"><br>
Vaga:<br>
<input type="text" id="vaga" placeholder="Z1"><br>
<input type="button" id="botao" value="Confirmar" onclick="adicionar()">
</form>
<br>
<table>
<thead>
<tr>
<td>Cliente</td>
<td>Modelo</td>
<td>Placa</td>
<td>Vaga</td>
<td>Entrada</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="estacionamento" border="2">
<tr class="vagas_n">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">A</td>
<td id="A1">LIVRE</td>
<td id="A2">LIVRE</td>
<td id="A3">LIVRE</td>
<td id="A4">LIVRE</td>
<td id="A5">LIVRE</td>
<td id="A6">LIVRE</td>
<td id="A7">LIVRE</td>
<td id="A8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">B</td>
<td id="B1">LIVRE</td>
<td id="B2">LIVRE</td>
<td id="B3">LIVRE</td>
<td id="B4">LIVRE</td>
<td id="B5">LIVRE</td>
<td id="B6">LIVRE</td>
<td id="B7">LIVRE</td>
<td id="B8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">C</td>
<td id="C1">LIVRE</td>
<td id="C2">LIVRE</td>
<td id="C3">LIVRE</td>
<td id="C4">LIVRE</td>
<td id="C5">LIVRE</td>
<td id="C6">LIVRE</td>
<td id="C7">LIVRE</td>
<td id="C8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">D</td>
<td id="D1">LIVRE</td>
<td id="D2">LIVRE</td>
<td id="D3">LIVRE</td>
<td id="D4">LIVRE</td>
<td id="D5">LIVRE</td>
<td id="D6">LIVRE</td>
<td id="D7">LIVRE</td>
<td id="D8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">E</td>
<td id="E1">LIVRE</td>
<td id="E2">LIVRE</td>
<td id="E3">LIVRE</td>
<td id="E4">LIVRE</td>
<td id="E5">LIVRE</td>
<td id="E6">LIVRE</td>
<td id="E7">LIVRE</td>
<td id="E8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">F</td>
<td id="F1">LIVRE</td>
<td id="F2">LIVRE</td>
<td id="F3">LIVRE</td>
<td id="F4">LIVRE</td>
<td id="F5">LIVRE</td>
<td id="F6">LIVRE</td>
<td id="F7">LIVRE</td>
<td id="F8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">G</td>
<td id="G1">LIVRE</td>
<td id="G2">LIVRE</td>
<td id="G3">LIVRE</td>
<td id="G4">LIVRE</td>
<td id="G5">LIVRE</td>
<td id="G6">LIVRE</td>
<td id="G7">LIVRE</td>
<td id="G8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">H</td>
<td id="H1">LIVRE</td>
<td id="H2">LIVRE</td>
<td id="H3">LIVRE</td>
<td id="H4">LIVRE</td>
<td id="H5">LIVRE</td>
<td id="H6">LIVRE</td>
<td id="H7">LIVRE</td>
<td id="H8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">I</td>
<td id="I1">LIVRE</td>
<td id="I2">LIVRE</td>
<td id="I3">LIVRE</td>
<td id="I4">LIVRE</td>
<td id="I5">LIVRE</td>
<td id="I6">LIVRE</td>
<td id="I7">LIVRE</td>
<td id="I8">LIVRE</td>
</tr>
<tr class="vagas">
<td class="vagas_letras">J</td>
<td id="J1">LIVRE</td>
<td id="J2">LIVRE</td>
<td id="J3">LIVRE</td>
<td id="J4">LIVRE</td>
<td id="J5">LIVRE</td>
<td id="J6">LIVRE</td>
<td id="J7">LIVRE</td>
<td id="J8">LIVRE</td>
</tr>
</table>
<script type="text/javascript">
// variaveis globais
var corpo_tabela = document.querySelector('tbody');
var campo_botao = document.createElement('button')
campo_botao.innerHTML = 'Excluir'
function adicionar(){
// Variaveis Principais da função
var cliente_ = document.getElementById('cliente').value;
var modelo_ = document.getElementById('modelo').value;
var placa_ = document.getElementById('placa').value;
var vaga_ = document.getElementById('vaga').value;
var hora_entrada = new Date();
var minutos_entrada = new Date();
var entrada_ = hora_entrada.getHours() + ':' + minutos_entrada.getMinutes();
var campo_botao = document.createElement('button')
campo_botao.innerHTML = 'Excluir'
campo_botao.addEventListener("click", function(){
linha.parentNode.parentNode.removeChild(linha.parentNode);
});
// Validação do formulario
if ((cliente_ == "") || (modelo_ == "") || (placa_ == "") || (vaga_ == "")){
alert ("Preencha os campos vazios")
}
// Validação da vaga
else {
var id = document.getElementById(document.getElementById('vaga').value)
if (id.innerHTML != "LIVRE") {
alert ("Vaga ocupada, favor escolher outra!");
} else {
id.style.background = 'red';
id.innerHTML = placa_;
console.log(id)
// criação das tag html
var linha = document.createElement('tr');
var campo_cliente = document.createElement('td');
var campo_modelo = document.createElement('td');
var campo_placa = document.createElement('td');
var campo_vaga = document.createElement('td');
var campo_entrada = document.createElement('td');
// atribuindo para variavel o texto dos campos do formulario
var texto_cliente = document.createTextNode(cliente_);
var texto_modelo = document.createTextNode(modelo_);
var texto_placa = document.createTextNode(placa_);
var texto_vaga = document.createTextNode(vaga_);
var texto_entrada = document.createTextNode(entrada_);
// inserindo o texto nas tags criadas
campo_cliente.appendChild(texto_cliente);
campo_modelo.appendChild(texto_modelo);
campo_placa.appendChild(texto_placa);
campo_vaga.appendChild(texto_vaga);
campo_entrada.appendChild(texto_entrada);
linha.appendChild(campo_cliente);
linha.appendChild(campo_modelo);
linha.appendChild(campo_placa);
linha.appendChild(campo_vaga);
linha.appendChild(campo_entrada);
linha.appendChild(campo_botao);
corpo_tabela.appendChild(linha);
// limpar formulario
document.getElementById('cliente').value='';
document.getElementById('modelo').value='';
document.getElementById('placa').value='';
document.getElementById('vaga').value='';
}
}
}
</script>
</body>
</html>.
Fhfk
Curtir tópico
+ 0
Responder
Posts
26/10/2019
Thiago Moreno
campo_botao.addEventListener("click", function(this){
corpo_tabela.removeChild(this.parentNode.parentNode.rowIndex);
});
Responder
Clique aqui para fazer login e interagir na Comunidade :)
