Desde mi tabla quiero tener la opción de eliminar filas y que se actualice el array.
¿Cómo puedo hacerlo?
Sé que debo usar el método splice
pero ¿cómo puedo obtener el id de la fila y luego compararlo con el id del array para que sea borrado?
// Declaramos un arreglo donde guardar nuestros jugadores
var misJugadores = [];
// Obtenemos nuestro elemento donde mostrar los jugadores
**var jugadores = document.getElementById('jugadores');**
// Creamos una clase llamada jugador con un constructor que reciba 3 párametros
class Jugador {
constructor(nombre, edad, dinero) {
this.nombre = nombre;
this.edad = edad;
this.dinero = dinero;
}
}
// Función para crear nuestro jugador
function crearJugador() {
// Obtenemos el nombre dado por el usuario
var nombre = document.getElementById('nombre').value;
// Obtenemos la edad dad por el usuario y la parseamos
var edad = parseInt(document.getElementById('edad').value)
// Creamos nuestro jugador
var jugador = new Jugador(nombre, edad, 0);
// Lo añadimos a nuestro arreglo
misJugadores.push(jugador);
// Actualizamos nuestra tabla
actualizarJugadores();
}
// Con esta función recorremos a todos nuestros jugadores
// en el arreglo anteriormente creado
// y los mostramos en la tabla
function actualizarJugadores() {
// Limipamos la tabla para no repetir jugadores
jugadores.innerHTML = '';
// Recorremos nuestros jugadores
for (var i = 0; i < misJugadores.length; i++) {
// Añadimos nuestros jugadores a la tabla
jugadores.innerHTML = jugadores.innerHTML +
'<tr>' +
'<td>' + misJugadores[i].nombre + '</td>' +
'<td>' + misJugadores[i].edad + '</td>' +
'<td>' + misJugadores[i].dinero + '</td>' +
'</tr>';
}
}
<form>
<input type="text" id="nombre" placeHolder="Nombre" />
<input type="text" id="edad" placeholder="Edad" />
<input type="button" onClick="crearJugador();" value="Enviar mis datos!" />
</form>
<hr />
<h1>Mis Jugadores</h1>
<button onclick="actualizarJugadores();">Actualizar jugadores</button><br /><br />
<table border="1" cellspacing="0">
<tr>
<td>Nombre</td>
<td>Edad</td>
<td>Dinero</td>
</tr>
<tbody id="jugadores"></tbody>
</table>