53

我有以下 HTML 表格：

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

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

他能怎么办？

4

4 回答 4

109

以下 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 代码（演示）：

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>

于 2013-06-09T17:58:15.777 回答
28

如果您还要使用标题，那么您需要以下内容：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）”。

于 2015-02-04T12:04:15.170 回答
14

这是对 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;
}

您可以在这个 jsfiddle中看到行为。

于 2016-09-17T03:29:28.390 回答
2

这是一个 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>

于 2016-09-16T22:33:53.420 回答