Question

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

这是一个名单，但问题是有时候我需要在这个表中添加更多的名字而且我必须在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手动添加它。

Answer 1

您可以使用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>

FIDDLE

Answer 2

这应该适合你：

<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

Answer 3

编辑：好像发布的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;
}

Answer 4

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

Answer 5

我会说这样做（我会假设你不会加载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>

希望这有助于：）

Answer 6

您确定不需要有序列表吗？

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

HTML和JavaScript自动递增编号

6 个答案: