Good day, I have a code that generates a table according to the months that I select with a certain vector that can be any number, then when I hit the save button, a table is generated with the javascript function, that is, I save the months in an array and generate a table with the objects of the array. But I want them to have a button that, when clicked, deletes that row and also deletes the array, so I wanted to know if there is a function that, when I click on the row, gives me the number to be able to delete it from the array.
I hope you understand what I want to tell you, thank you.
Here I put the code I have.
const mes_especial = [];
const vector_mensual = [];
function guardar_mes_especial() {
var inputmes = document.getElementById('mesEspecial');
var ms = inputmes.options[inputmes.selectedIndex].text;
var vs = document.getElementById('vectorMensual').value;
if (ms != 'Elige un mes' && vs != 1) {
mes_especial.push(ms);
vector_mensual.push(vs);
}
document.querySelector('#mesespecial').innerHTML = generarTablaMesesEspeciales(mes_especial, vector_mensual);
document.ready = document.getElementById('mesEspecial').value = '13';
document.ready = document.getElementById('vectorMensual').value = '1';
}
function generarTablaMesesEspeciales(mes_especial, vector_mensual) {
var tabla1 =
"<table id='tablita1' class='table'> <thead class='thead-light'> <tr><th scope='col'>Mes</th><th scope='col'>Vector mensual</th></tr></thead>";
tabla1 += '<tbody>';
for (var i = 0; i < mes_especial.length; i++) {
tabla1 += '<tr><td>' + mes_especial[i] + '</td><td>' + vector_mensual[i] + '</td></tr>';
}
tabla1 += '</tbody>';
tabla1 += '</table>';
return tabla1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fechas</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header>
<h1 class="display-1 text-center bg-light text-dark">Cuotas</h1>
</header>
<main>
<div class="container">
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="mesEspecial">Meses especiales</label>
<select name="mesEspecial" id="mesEspecial" class="form-control">
<option value="13">Elige un mes</option>
<option value='0'>Enero</option>
<option value='1'>Febrero</option>
<option value='2'>Marzo</option>
<option value='3'>Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="vectorMensual">Vector del mes</label>
<input class="form-control" type="number" name="vectorMensual" id="vectorMensual" placeholder="Introduce el vector" value="1" min="0" max="10" step="0.25" required>
</div>
<div class="form-group col-md-4" >
<label for="guardar"> </label>
<br>
<button name="guardar" class="btn btn-light" id="guardar" onclick="guardar_mes_especial()">Guardar</button>
</div>
</div>
<div class="form-group text-center">
<div id="mesespecial"></div>
</div>
</div>
</div>
</main>
</body>
</html>
Here I leave you a possible solution made in jQuery:
Passing the element that was pressed
onclick="remove(this)"
inside the function as a parameter,remove()
we grab the index of the parent element withel.closest("tr").index()
and successively we delete the value inside the array thanks to the functionsplice
that we tell it to delete the value that is in the position of the index and delete 1 single element and it would look like this:array.splice(indice, 1)
working example:
I hope this helps you
I leave you a function
Javascript
as you request:What I did was create a new one
td
that contains abutton
, to saidbutton
I added the eventonclick
. The functiononclick
takes care of removing therow
current one, gets theíndice
delrow
and removes it from thearrays
with the functionsplice
.References: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from
I hope it helps you. Greetings.