3

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>
0

1 respuesta 1

0

Puedes ponerle a los tr un id como Jugador-1, jugador-2... y así te será más fácil de eliminar.


// 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 id="jugador-'+i+'">'+
              '<td>' + misJugadores[i].nombre + '</td>' +
              '<td>' + misJugadores[i].edad + '</td>' +
              '<td>' + misJugadores[i].dinero + '</td>' +
          '</tr>';
  }
}

Para así en la función eliminarJugador puedas hacer:


/** Función que toma la posición del jugador y la elimina.
    * @param {int} id : El indice del jugador a eliminar.
    * @return {booleam} true si se pudo eliminar, false en caso de error.
**/
function eliminarJugador(id){
    let father=document.getElementById("jugadores");//El padre del elemento a eliminar.
    let child= document.getElementById("jugador-"+id);
    if (child==null) return false;//No existe el jugador indicado.
    father.removeChild(child);//Eliminamos el elemento del doom.
    misJugadore.splice(id-1,id);//Aquí eliminamos al jugador indicado.
    return true;
}

Y aconsejo crear una función de busqueda de jugadores para que puedas llamar a la función eliminar jugador deacuerdo a los datos introducidos por el usuario:


/** función que busca al jugador dentro del array misJugadores deacuerdo al nombre, edad y fondo monerario.
    * @param {string} nombre : Cadena que representa al nombre del jugador.
    * @param {int} edad : Número entero que representa la edad.
    * @param {int} fondo : Fondo monetario del jugador.
    * @return {int} retorna el indice del primer jugador compatible y retorna null cuando no lo consigue.

**/
function search_jugador(nombre,edad,fondo){
    for (let i in misJugadores){
        if (misJugadores[i].nombre==nombre && misJugadores[i].edad==edad && misJugadores[i].dinero==fondo) return i;
    }
    return null;
}

Así puedes crear controles que le enseñé al usuario una lista de los jugadores disponibles y te entregué el indice del jugador que no quiere y lo eliminas con la función eliminarJugador. Ejemplo:

Output


1- nombre: daniel, edad: 19, dinero: 0Bs.ss
2- ....

Input:


1

Procesamiento:

<input type="number" placeholder="ingresé el numero del jugador que desea eliminar."/>
<button onclick="eliminarJugador(document.getElementById('input_eliminar').value-1);//Eliminamos al juagor del id que tiene el input.">Eliminar jugador</button>

El -1 es porque le decimos al usuario los id+1 para que empiece con 1 y no con cero.

Nota: La función search_jugador te la dejo porque pienso que es mejor en vez de buscar por los datos, que por los indices del jugador.

1
  • Nota: Puede que consigas errores en el código. Lo hice desde el celular y no he descargado ni un ide para probarlo.
    – DABL03
    el 9 ago. 2022 a las 18:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.