1

Estoy haciendo una tabla en el cual uno agregar el nombre a traves del input y se va colocando en la tabla con el índice, el problema es que no quiero que aparezca el indice '0' y al lado 'undefined'. No entiendo por que me aparece así, quiero que me aparezca vacía y al momento de agregar un nombre que aparezca correctamente con el índice desde 1. No se por que pasa esto.

La idea es que al momento de cargar la pagina aparezca vacía la tabla, y cuando yo cargue un nombre a atrves del input, aparezca el nombre con el índice desde '1'.

const btnAgregar = document.getElementById('agregar');
const inputJugador = document.getElementById('input');
const tablaJugadores = document.getElementById('tabla-jugadores');


let tabla = [{

}];


function listaNombres() {
    let htmlNombres = tabla.map((jugador,indice) =>  `<tr>
    <th scope="row">${indice}</th>
    <td>${jugador.nombre}</td>
    <td>
    <div class="btn-group" role="group" aria-label="Basic mixed styles example">
        <button type="button" class="btn btn-danger">Eliminar</button>
        <button type="button" class="btn btn-success">Editar</<button>
      </div>
      </td>
  </tr>`).join("");
  tablaJugadores.innerHTML = htmlNombres;
}

function enviarDatos (evento){
    evento.preventDefault();
    const datos = {
        nombre: inputJugador.value
    }
    tabla.push(datos);
    listaNombres();
}

listaNombres();
btnAgregar.onclick = enviarDatos;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pruebas</title>
    <a href="index.html">Inicio</a>
</head>
<body>

    <br>

    <input type="text" placeholder="Agregar jugador" id="input">
    <div>
        <button id="agregar">Agregar Jugadores</button>
    </div>

   

    <div>
        <table>
            <thead>
              <tr>
                <th scope="col">Jugadores</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody id="tabla-jugadores">
            
            </tbody>
          </table>
    </div>

    <script src="probando.js"></script>
    

</body>
</html>

2
  • En Javascript (como en muchos otros lenguajes) los índices de las listas (Arrays) empiezan en cero (0). Si lo que deseas es mostrar un valor distinto de cero en la vista, basta añadir un 1 al valor del índice devuelto por la lista, pero de ninguna manera podrás lograr que una lista en Javascript empiece en 1. Saludos. Commented el 7 mar. 2021 a las 17:52
  • Si lo añado con el indice 1 pero no pasa nada, sigue igual desde cero.
    – Ketzell
    Commented el 7 mar. 2021 a las 17:53

1 respuesta 1

2

Tal como digo en mi comentario, no existe forma de que un Array en Javascript comience en un índice distinto de cero (0). Lo que debes hacer es generar tu vista condicionalmente. Además, al iniciar tu lista con un elemento, rompes la esencia de la lista, con el primer elemento como un objeto vacío:

let tabla = [{}];

Esto no tiene ningún beneficio, al contrario ensucia la tabla.

Debería ser simplemente:

let tabla = [];

Por otro lado, en la función listaNombres() debes usar una condición, para pintar la vista sólo si la tabla tiene elementos, por ejemplo:

if(tabla.length) { ... }

Si la tabla tiene 0 elementos, entonces no se cumple la condición y no se pinta la vista.

Luego, para que se muestre un valor diferente al índice del Array de Javascript como índice de la tabla, sólo debes aplicar la suma de 1 al índice devuelto en el método map que recorre la tabla. Por ejemplo:

<!-- Añade 1 al índice -->
<th scope="row">${indice + 1}</th>

De esta forma, tu función pintará correctamente el valor que buscas y sólo si hay elementos en la tabla.

Edición

Tal como comentas. Si el campo input está vacío, no se debe hacer nada relativo a insertar en la tabla ni pintar la vista.

Para ello usas también un condicional, por ejemplo, el siguiente condicional llama a return, terminando la función antes de que realice el resto de operaciones. Se cumple sólo si el campo input está vacío. (Ojo, que un caracter de espacio no se considera false):

if(!inputJugador.value) return;

El código completo puede quedar así:

const btnAgregar = document.getElementById('agregar');
const inputJugador = document.getElementById('input');
const tablaJugadores = document.getElementById('tabla-jugadores');


let tabla = [];


function listaNombres() {
    if(tabla.length) {
      let htmlNombres = tabla.map((jugador,indice) =>  `<tr>
        <th scope="row">${indice + 1}</th>
        <td>${jugador.nombre}</td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic mixed styles example">
            <button type="button" class="btn btn-danger">Eliminar</button>
            <button type="button" class="btn btn-success">Editar</<button>
          </div>
        </td>
      </tr>`).join("");
      tablaJugadores.innerHTML = htmlNombres;
    }
}

function enviarDatos (evento){
    evento.preventDefault();
    // si el campo input está vacio salimos
    if(!inputJugador.value) return;

    const datos = {
        nombre: inputJugador.value
    }
    tabla.push(datos);
    listaNombres();
}

listaNombres();
btnAgregar.onclick = enviarDatos;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pruebas</title>
    <a href="index.html">Inicio</a>
</head>
<body>

    <br>

    <input type="text" placeholder="Agregar jugador" id="input">
    <div>
        <button id="agregar">Agregar Jugadores</button>
    </div>

   

    <div>
        <table>
            <thead>
              <tr>
                <th scope="col">Jugadores</th>
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody id="tabla-jugadores">
            
            </tbody>
          </table>
    </div>

    <script src="probando.js"></script>
    

</body>
</html>

Espero que esto te ayude a resolver el problema.

2
  • Gracias pude solucionar mi problema, solo me dejaste con duda cuando explicaste la parte de usar una condición para pintar la vista. Quisiste decir que si el 'input' aparece un campo vacío y al darle click al botón no va añadir nada por el simple hecho que está vacío? Por que si es así cuando aplico la condición de todas formas me sigue generando campos vacíos.
    – Ketzell
    Commented el 7 mar. 2021 a las 19:26
  • 1
    @Ketzell actualicé la respuesta para tomar en cuenta el comentario que dejaste. Saludos Commented el 7 mar. 2021 a las 20:04

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.