自动编号表格行？答案

【问题标题】：Auto-number table rows?自动编号表格行？
【发布时间】：2013-06-05 10:22:35
【问题描述】：

我有以下 HTML 表格：

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

我希望此表中的每一行都有一个自动分配给每个项目的编号。

他怎么办？

【问题讨论】：

为什么？这是一个三行的静态表格，只需输入 1, 2 ,3
你不能，除非你使用一些脚本。
您能否具体说明您想要什么，以及您想要实现这一目标的原因。这将有助于我们帮助您提高效率。
好的，但我想要的是一个数字，1,2,3,4 ... 自动每行。 :(

标签： javascript html-table

【解决方案1】：

以下 CSS 枚举表格行 (demo)：

table {
  counter-reset: rowNumber;
}

table tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) ".";
  padding-right: 0.3em;
  text-align: right;
}

<table cellpadding="0">
  <tr><td>blue</td></tr>
  <tr><td>red</td></tr>
  <tr><td>yellow</td></tr>
  <tr><td>green</td></tr>
  <tr><td>purple</td></tr>
  <tr><td>orange</td></tr>
  <tr><td>maroon</td></tr>
  <tr><td>mauve</td></tr>
  <tr><td>lavender</td></tr>
  <tr><td>pink</td></tr>
  <tr><td>brown</td></tr>
</table>

如果无法使用 CSS，请尝试以下 JavaScript 代码 (demo)：

var table = document.getElementsByTagName('table')[0],
  rows = table.getElementsByTagName('tr'),
  text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 0, len = rows.length; i < len; i++) {
  rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

【讨论】：

+1 我删除了我的答案，因为我没有费心为.textContent 提供修复，但我真的建议使用自动提供的.rows 和.cells 集合代替getElementsByTagName() 和 .children。
css 代码适用于我，但第一个 td 从 2 开始，而不是从 1。也许它将 th 视为 td，因此从 2 开始......无论如何，你可以查看它在这里：benia.biz/pricing ... 将不胜感激这个解决方案，并乐意为此提供赏金。
@Benia：只使用table.rows 而不是第一条评论中提到的table.getElementsByTagName('tr')？
疯了，我从来不知道css的计数器。
@Craig：很高兴向您介绍了一些有趣的东西！

【解决方案2】：

如果您也使用标题，那么您需要以下内容： http://jsfiddle.net/davidThomas/7RyGX/

table {
    counter-reset: rowNumber;
}

table tr:not(:first-child) {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

注意那里的：“:not(:first-child)”。

【讨论】：

您已链接到一个 JS Fiddle 演示，该演示不包括您的问题中的 jQuery。如果您添加 jQuery 并（可能）删除该 JS Fiddle 中已经使其工作的 CSS，然后点击屏幕顶部的“更新”按钮，您将有一个演示 your 代码而不是我的。我认为哪个对你更有用。否则，您可以使用“堆栈片段”将基于前端（HTML、CSS 和 JavaScript）的代码嵌入到您的答案中（单击edit，然后单击文本区域上方的</> 按钮）。
谢谢！接受的答案会导致标题出现问题，这个没有！谢谢！

【解决方案3】：

这是对 David Thomas 的 CSS 解决方案的修改，无论是否在表中使用标题行。它在每行的第一个 td 单元格上增加计数器（从而跳过只有 th 单元格的行）：

table
{
    counter-reset: rowNumber;
}

table tr > td:first-child
{
    counter-increment: rowNumber;
}

table tr td:first-child::before
{
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

您可以在this jsfiddle 中看到该行为。

【讨论】：

【解决方案4】：

这是一个 javascript 解决方案，它将在每一行的开头添加一个单元格，该单元格将用于编号，如果有一个 th 单元格，则该单元格将获得一个 colspan=2 属性。

var addNumeration = function(cl){
  var table = document.querySelector('table.' + cl)
  var trs = table.querySelectorAll('tr')
  var counter = 1
  
  Array.prototype.forEach.call(trs, function(x,i){
    var firstChild = x.children[0]
    if (firstChild.tagName === 'TD') {
      var cell = document.createElement('td')
      cell.textContent = counter ++
      x.insertBefore(cell,firstChild)
    } else {
      firstChild.setAttribute('colspan',2)
    }
  })
}

addNumeration("test")

<table class="test" border="1">
  <tr>
   <th>hi!</th>
  </tr>
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>

</table>

【讨论】：

这对我来说是最好的解决方案。我们如何在顶部添加另一行带有字母 a-z 的行？