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自動增量編號

回答

相關問題