HTML 和 JavaScript 自动递增编号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11026258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML and JavaScript auto increment number
提问by Ryan
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.)
我是 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>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.
这是一个名字列表，但问题是有时我需要在这个表中添加更多名字，我必须在数字 1 前面添加，所以这意味着我必须重新编写数字列表，（例如：1 1 2 3 4 --> 1 2 3 4 5)。我觉得这不是一个好方法。
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
注意：我不想更改从上到下减少的列表编号。这是一个 HTML 文件，所以不能应用 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
任何人都可以帮助我将数字设置为“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>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.
以函数 Fill_i 为例：我认为在这种情况下应该使用 JavaScript。感谢您对这个问题的帮助和建议。
Again: I am not allowed to use PHP or ASP and when I add a new name, I add it manually by HTML.
再次：我不允许使用 PHP 或 ASP，当我添加新名称时，我通过 HTML 手动添加它。
回答by Musa
You can use a 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>
<tr>
<td class="count"></td>
<td>Maria</td>
</tr>
<tr>
<td class="count"></td>
<td>Victory</td>
</tr>
</table>回答by Paul
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.
该脚本应立即放置在您的表之后。它遍历表格的每一行，并在该单元格内的递增数字的开头添加一个额外的单元格。
回答by Peter Wilkinson
Are you sure you don't want an ordered list?
您确定不想要有序列表吗？
<ol>
<li>Fred</li>
<li>Barry</li>
</ol>
回答by Bunlong
<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>
回答by Kevin S.
Edit: seems like the other solutionposted would work do (was added while I typed this up).
编辑：似乎发布的其他解决方案可以工作（在我输入时添加）。
You really should be using PHP to do something dynamic like this, which would become trivial with a single for loop.
你真的应该使用 PHP 来做这样的动态事情，这对于单个 for 循环来说变得微不足道。
However, if you insist on using HTML/Javascript (or perhaps this is a 'static page'...) then what you are asking should be possible.
但是，如果您坚持使用 HTML/Javascript（或者这可能是一个“静态页面”...），那么您所要求的应该是可能的。
You could add a class to each of the <td>elements you want to use, so:
您可以为<td>要使用的每个元素添加一个类，因此：
<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>
Then you would have a javascript function that does something like this:
然后你会有一个 javascript 函数，它会做这样的事情：
var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
list[i].innerHTML = i;
}
回答by Ryan
I would say do this (im going to assume you are not going to load in jquery or anything fancy):
我会说这样做（我将假设您不会在 jquery 或任何花哨的东西中加载）：
<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>
hope this helps :)
希望这可以帮助 ：）
