Numéro d'augmentation automatique HTML et JavaScript

Je suis nouveau sur HTML et JavaScript. J'ai eu un problème comme celui-ci en HTML (Ce code ci-dessous ne montre que le problème pour vous faciliter la référence.)

<tr> <td>1</td> <td>Harry</td> </tr> <tr> <td>2</td> <td>Simon</td> </tr> <td>3</td> <td>Maria</td> </tr> </tr> <td>4</td> <td>Victory</td> </tr>

Il s'agit d'une liste de noms, mais le problème est que, quelque temps, j'ai besoin d'ajouter un nom dans cette table et JE DOIS ADD devant le numéro 1, ce qui signifie que je dois réécrire la liste de numéros, (EX: 1 1 2 3 4 -> 1 2 3 4 5). Je pense que ce n'est pas un bon moyen.

REMARQUE: je ne veux pas modifier la diminution du nombre de listes de haut en bas. Et c'est un fichier HTML, donc ne peut pas appliquer PHP

N'importe qui peut m'aider à faire le nombre d'une variable comme "i" et une fonction peut m'aider à remplir la variable i d'incrémenter de haut en bas automatiquement comme

 <tr> <td>i</td> <td>Harry</td> </tr> <tr> <td>i</td> <td>Simon</td> </tr> <td>i</td> <td>Maria</td> </tr> </tr> <td>i</td> <td>Victory</td> </tr>

Fonction Fill_i par exemple: je pense que JavaScript devrait être utilisé dans ce cas. Merci pour votre aide et suggestion sur ce problème.

Encore une fois: je ne suis pas autorisé à utiliser PHP ou ASP et lorsque j'ajoute un nouveau nom, je l'ajoute manuellement par HTML.

Cela devrait fonctionner pour vous:

 <table> <tr> <td>Harry</td> </tr> <tr> <td>Simon</td> </tr> <tr> <td>Maria</td> </tr> <tr> <td>Victory</td> </tr> </table> <script> var tables = document.getElementsByTagName('table'); var table = tables[tables.length - 1]; var rows = table.rows; for(var i = 0, td; i < rows.length; i++){ td = document.createElement('td'); td.appendChild(document.createTextNode(i + 1)); rows[i].insertBefore(td, rows[i].firstChild); } </script>

Le script doit être placé immédiatement après votre table. Il parcourt chaque rangée de votre table et ajoute une cellule supplémentaire au début avec le nombre d'incrémentation dans cette cellule.

JSFiddle Demo

Vous pouvez utiliser un compteur css – MDN

 table{counter-reset:section;} .count:before { counter-increment:section; content:counter(section); } <table> <tr> <td class="count"></td> <td>Harry</td> </tr> <tr> <td class="count"></td> <td>Simon</td> </tr> <td class="count"></td> <td>Maria</td> </tr> <tr> <td class="count"></td> <td>Victory</td> </tr> </table>

VIOLON

Edit: semble que l' autre solution affichée fonctionnerait (a été ajoutée pendant que j'ai tapé ceci).

Vous devriez vraiment utiliser PHP pour faire quelque chose de dynamique comme celui-ci, ce qui deviendrait trivial avec une seule boucle.

Toutefois, si vous insistez sur l'utilisation de HTML / Javascript (ou peut-être que c'est une «page statique» …), alors ce que vous demandez devrait être possible.

Vous pouvez ajouter une classe à chacun des éléments <td> vous souhaitez utiliser, de sorte que:

 <tr> <td class='personid'>i</td> <td>Harry</td> </tr> <tr> <td class='personid'>i</td> <td>Simon</td> </tr> <td class='personid'>i</td> <td>Maria</td> </tr> </tr> <td class='personid'>i</td> <td>Victory</td> </tr>

Ensuite, vous disposez d'une fonction javascript qui fait quelque chose comme ceci:

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

 <script> function addRow(index, name){ var tbody = document.getElementById("nameList"); var row = document.createElement("tr"); var data1 = document.createElement("td"); data1.appendChild(document.createTextNode(index)); var data2 = document.createElement("td"); data2.appendChild(document.createTextNode(name)); row.appendChild(data1); row.appendChild(data2); tbody.appendChild(row); } var name=new Array(); name[0]="Harry"; name[1]="Simon"; name[2]="Maria"; name[3]="Victory"; for(var i=0; i < name.length; i++) { addRow(i,name[i]); } </script> <html> <body> <table id="nameList"> </table> </body> </html>

Je dirais que fais ça (je vais supposer que tu ne chargeras pas jquery ou quelque chose de chic):

 <html> <head> <script type="text/javascript> function writeTable(){ // list of names var myList = [ "name1", "name2", "etc", "etc"]; // your variable to write your output var outputTable = "<table>"; //the div to write the output to var outputDiv = document.getElementById("output"); //the loop that writes the table for (var i=0; i<myList.length; i++){ outputTable += "</tr><td>"+i+"</td><td>"+myList[i]+"</td></tr>"; } //close the table outputTable += "</table>"; //write the table outputDiv.innerHTML = outputTable; } </script> </head> <body onload=writeTable()> <div id='output'></div> </body> </html>

J'espère que cela t'aides 🙂

Êtes-vous sûr de ne pas vouloir une liste ordonnée?

 <ol> <li>Fred</li> <li>Barry</li> </ol>