HTML和JavaScript自动增量编号

我是HTML和JavaScript的新手。我在HTML中有一个问题是这样的（下文仅此代码可视化的问题，为您轻松参考。）HTML和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>

这是一个名单，但问题是，有时我需要增加更多的名字进入这张表和我必须在号码前加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>Victory</td> 
</tr>

函数Fill_i例如：我认为JavaScript应该用在这种情况下。感谢您对此问题的帮助和建议。

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

来源

2012-06-14 Ryan

AAAARRRRRGGGGGGG !!!!! TD和TR的！大声笑jk，数据来自哪里有名称字段中的名称？ – Ryan

数据必须由我自己添加，输入它。这不是来自任何数据库 – Ryan

这应该为你工作：

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

脚本应该立即表格之后放置。它遍历表格中的每一行，并在该单元格内增加一个单元格，并在该单元格内增加一个数字。

JSFiddle Demo

来源

2012-06-14 03:34:47 Paulpro

谢谢，它的工作对我来说 – Ryan

编辑：好像贴将工作做（加入，而我打这件事）的other solution。

你真的应该使用PHP来做一些动态的事情，这对于一个for循环来说将变得微不足道。但是，如果你坚持使用HTML/Javascript（或者这是一个'静态页面'...），那么你所问的应该是可能的。

你可以添加一个类每个要使用<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>

然后，你将有一个JavaScript函数，它是这样的：

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

来源

2012-06-14 03:37:26

+1这也完成了工作 – Paulpro

我正在尝试这一个 – Ryan

你可以用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

来源

2012-06-14 03:41:46 Musa

哇。我从来不会猜测这是可能的CSS单独。太疯狂了。 +1 – Paulpro

多数民众赞成在我的回答，好:) :) – Ryan

尤普，真是太神奇了。这是一些CSS高级代码 – Ryan

我会说这样做（IM将假设你不打算在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>

希望这有助于:)

来源

2012-06-14 03:43:09 Ryan

感谢您的回复 – Ryan

你确定你不不想要一个有序列表？

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

来源

2012-06-14 03:46:16

对不起，我不能使用这个 – 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>

来源

2012-06-14 03:53:16

HTML和JavaScript自动增量编号

回答

相关问题