Numéro d'incrément automatique HTML et JavaScript

Je suis nouveau en HTML et JavaScript. Je suis un problème comme celui-ci en HTML (Ce code ci-dessous ne visualiser le problème pour vous facile à référencer.)Numéro d'incrément automatique HTML et JavaScript

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

Ceci est une liste de noms, mais le problème est que parfois je dois ajouter plus nom dans cette table et je dois ajouter devant le numéro 1, ce qui signifie que je dois réécrire la liste des 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 souhaite pas modifier la diminution du nombre de listes de haut en bas. Et cela est un fichier HTML ne peut donc pas appliquer PHP

Tout le monde peut me aider à faire le nombre à une variable comme « i » et une fonction peut me aider à remplir la variable i incrémenter de haut en bas automatiquement comme

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.

Source

2012-06-14 Ryan

AAAARRRRRGGGGGGG !!!!! TD et TR !!! lol jk, d'où viennent les données qui ont les noms dans les champs de nom? – Ryan

Les données doivent être ajoutées par moi-même, tapez-les. Ce n'est pas venu de n'importe quelle base de données – Ryan

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 passe par chaque ligne de votre table et ajoute une cellule supplémentaire au début avec le nombre incrémenté à l'intérieur de cette cellule.

JSFiddle Demo

Source

2012-06-14 03:34:47 Paulpro

merci, c'est le travail pour moi – Ryan

Edit: semble que le other solution affiché fonctionnerait faire (a été ajouté pendant que je tapais ce haut).

Vous devriez vraiment utiliser PHP pour faire quelque chose de dynamique comme ça, qui deviendrait trivial avec une seule boucle for. Cependant, si vous insistez pour utiliser 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 <td> éléments que vous souhaitez utiliser, donc:

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

alors vous avez 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; 
}

Source

2012-06-14 03:37:26

+1 Cela fait aussi le travail – Paulpro

J'essaie celui-ci – Ryan

Vous peut utiliser un css counter - 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>

FIDDLE

Source

2012-06-14 03:41:46 Musa

Whoa. Je n'aurais jamais deviné que c'était possible avec CSS seul. C'est fou. +1 – Paulpro

c'est mieux que ma réponse, agréable :) – Ryan

Yupp, vraiment incroyable. C'est un peu de code avance CSS – Ryan

Je dirais le faire (im vais supposer que vous n'allez pas charger jquery ou quoi que ce soit de fantaisie):

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

espérons que cette aide :)

Source

2012-06-14 03:43:09 Ryan

Merci pour votre réponse – Ryan

Êtes-vous sûr que vous don ne veux pas une liste ordonnée?

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

Source

2012-06-14 03:46:16

désolé, je ne pouvais pas utiliser cette – Ryan

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

Source

2012-06-14 03:53:16

Numéro d'incrément automatique HTML et JavaScript

Répondre

Questions connexes