HTML和JavaScript自动递增编号 [英] HTML and JavaScript auto increment number

问题描述

我是HTML和JavaScript的新手。我在HTML中遇到了一个这样的问题（下面的代码仅仅是为了方便您的参考可视化的问题。）

  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>胜利< / td> 
< / tr> 
  

这是一个名单，但问题是有时候我需要在这个表中添加更多的名字我必须在第1号前面添加，所以我必须重新编写号码列表，（EX：1 1 2 3 4 - > 1 2 3 4 5）。我觉得这不是一个好办法。

注意：我不想更改从上到下的列表号减少。这是一个HTML文件，所以不能应用PHP

任何人都可以帮助我把数字变成一个像i这样的变量，一个函数可以帮我填写变量i从上到下自动增加，如

 < 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>胜利< / td> 
< / tr> 
  

功能Fill_i例如：
我认为在这种情况下应该使用JavaScript。感谢您的帮助和建议这个问题。

再次：我不允许使用PHP或ASP，当我添加一个新名称时，我通过HTML手动添加。

解决方案

这应该适合你：

 code><表> 
< tr> 
< td> Harry< / td> 
< / tr> 
< tr> 
< td> Simon< / td> 
< / tr> 
< tr> 
< td> Maria< / td> 
< / tr> 
< tr> 
< td>胜利< / td> 
< / tr> 
< / table> 
< script> 
 var tables = document.getElementsByTagName（'table'）; 
 var table = tables [tables.length  -  1]; 
 var rows = table.rows; （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> 
  

脚本应该立即放在你的桌面之后。它通过你的表的每一行，并添加一个额外的单元格开始与该单元格内增加的数字。

JSFiddle演示

I am new to HTML and JavaScript. I got a problem like this in HTML (This code below only visualize the problem for you to easy to reference.)

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

This is a name list, however the problem is that sometime i need to add more name into this table and I HAVE TO ADD in front of Number 1, so meaning i have to re-write the number list, (EX: 1 1 2 3 4 --> 1 2 3 4 5). I feel that is not a good way.

NOTE: I don't want to change the list number decrease from top to bottom. And this is a HTML file so can't apply PHP

Anyone can help me to make the number to a variable like "i" and a function can help me to fill variable i increment from top to bottom automatically like

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

Function Fill_i for example: I think that JavaScript should be used in this case. Thanks for your help and suggestion on this problem.

Again: I am not allowed to use PHP or ASP and when I add a new name, I add it manually by HTML.

解决方案

This should work for you:

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

The script should be placed immediately after your table. It goes through each row of your table and adds an extra cell to the beginning with the incrementing number inside that cell.

JSFiddle Demo

这篇关于HTML和JavaScript自动递增编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！