HTML 和 JavaScript 自动递增编号

Posted

技术标签:

【中文标题】HTML 和 JavaScript 自动递增编号【英文标题】:HTML and JavaScript auto increment number 【发布时间】:2012-06-17 01:58:44 【问题描述】:

我是 htmljavascript 的新手。我在 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 前面添加,所以这意味着我必须重新编写数字列表,(例如: 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 手动添加它。

【问题讨论】:

AAAARRRRRGGGGGGG!!!!!! TD和TR!!!大声笑 jk,名称字段中有名称的数据来自哪里? 数据要自己添加,输入。这不是来自任何数据库 【参考方案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

【讨论】:

非常酷,但与旧版浏览器不兼容。不过,OP 可能不在乎。 我什至在test 中添加了一些jQuery,令人印象深刻的动态计数。 亲爱的穆萨,感谢您的酷回答!我可以再问一个问题吗?如果我在一页中有 3 个表格,我该怎么办?因为在第一个表结束后,我想将数字计数重置为 1 并从 1 开始在第二个表中。非常感谢您有更多解决方案供我们参考 @Ryan 只是将计数器设置为在表格元素上重置 - 请参阅编辑。 @Ryan 看看答案中的代码,看看它在小提琴中的作用【参考方案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

【讨论】:

【参考方案3】:

编辑:似乎发布的other solution 会起作用(在我输入此内容时添加)。

你真的应该使用 PHP 来做这样的动态事情,这对于单个 for 循环来说会变得微不足道。

但是,如果您坚持使用 HTML/Javascript(或者这可能是一个“静态页面”......),那么您的要求应该是可能的。

您可以为每个要使用的&lt;td&gt; 元素添加一个类,因此:

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

【讨论】:

【参考方案4】:

您确定不想要有序列表吗?

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

【讨论】:

【参考方案5】:
<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>

【讨论】:

【参考方案6】:

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

希望这会有所帮助:)

【讨论】:

【参考方案7】:

试试这个

$(document).ready(function() 
    var addSerialNumber = function () 
        $('table tr').each(function(index) 
            $(this).find('td:nth-child(1)').html(index);
        );
    ;
    addSerialNumber();
 );

【讨论】:

以上是关于HTML 和 JavaScript 自动递增编号的主要内容,如果未能解决你的问题,请参考以下文章

使用 javascript 按钮更改 html,使用自动递增数字选择多个值

更改自动递增起始编号?

重置自动递增编号

如何让SELECT 查询结果额外增加自动递增序号sqlserver

使用 PDO/MySQL 将自动增量编号附加到电子邮件中发送和发送电子邮件

Oracle里面想实现自动插入递增的序号