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. el 9 ago. 2022 a las 18:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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