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