自动编号表格行? [英] Auto-number table rows?

问题描述

我有以下 HTML 表格:

I have the following HTML table:

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

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

I would like each row in this table have a number automatically assigned to each item.

他怎么办?

推荐答案

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

The following CSS enumerates table rows (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):

If the CSS cannot be used, try the following JavaScript code (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>

这篇关于自动编号表格行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！