Número de incremento automático de HTML y JavaScript

Soy nuevo en HTML y JavaScript. Tengo un problema como este en HTML (Este código a continuación solo visualiza el problema para que sea fácil de referencia).

 1 Harry   2 Simon  3 Maria   4 Victory  

Esta es una lista de nombres, sin embargo, el problema es que alguna vez necesito agregar más nombres a esta tabla y TENGO QUE AGREGAR frente al Número 1, lo que significa que tengo que volver a escribir la lista de números, (EX: 1 1 2 3 4 -> 1 2 3 4 5). Siento que no es una buena manera.

NOTA: No deseo cambiar la disminución del número de lista de arriba a abajo. Y este es un archivo HTML, por lo que no puede aplicar PHP

Cualquiera me puede ayudar a hacer el número a una variable como “i” y una función me puede ayudar a llenar la variable i incrementar de arriba a abajo automáticamente como

  i Harry   i Simon  i Maria   i Victory  

Función Fill_i por ejemplo: creo que JavaScript debería usarse en este caso. Gracias por su ayuda y sugerencia sobre este problema.

De nuevo: no tengo permitido usar PHP o ASP y cuando agrego un nombre nuevo, lo agrego manualmente por HTML.

Esto debería funcionar para usted:

 
Harry
Simon
Maria
Victory

La secuencia de comandos debe colocarse inmediatamente después de su tabla. Pasa por cada fila de la tabla y agrega una celda extra al comienzo con el número creciente dentro de esa celda.

Demostración de JSFiddle

Puedes usar un contador css – MDN

 table { counter-reset: section; } .count:before { counter-increment: section; content: counter(section); } 
 
Harry
Simon
Maria
Victory

Editar: parece que la otra solución publicada funcionaría (se agregó mientras escribía esto).

Deberías usar PHP para hacer algo dynamic como este, que se volvería trivial con un único bucle for.

Sin embargo, si insistes en usar HTML / Javascript (o tal vez esto es una ‘página estática’ …) entonces lo que estás preguntando debería ser posible.

Puede agregar una clase a cada uno de los elementos

que desee usar, de modo que:

  i Harry   i Simon  i Maria   i Victory  

Entonces tendrías una función de JavaScript que hace algo como esto:

 var list = document.getElementsByClassName("personid"); for (var i = 1; i <= list.length; i++) { list[i].innerHTML = i; } 
    

Yo diría que hagas esto (voy a suponer que no vas a cargar en jquery ni nada elegante):

      

espero que esto ayude 🙂

¿Estás seguro de que no quieres una lista ordenada?

 
  1. Fred
  2. Barry