Question

我有一张表，我想为每一行添加自动编号。我希望它出现在第二列。

这一定是一个直截了当的事情，但是无法理解。我已经按照Automatic Serial Number Row in HTML Table

的指示行事了

但这仅出现在第一列。我希望它出现在第二个td：

Answer 1

然后使用:nth-child psuedo选择器，或者您可以使用javascript迭代行并将数字添加到其中一个单元格。两个选项如下：

＆＃13;

document.querySelectorAll('table').forEach(function(table) {
    var index = 1;
    table.querySelectorAll('tr').forEach(function(row) {
        row.querySelectorAll('td').forEach(function(column, position) {
            if (position === 1) {
                column.innerHTML = '' + index;
                index++;
            }
        });
    });
});

＆＃13;

table{
  counter-reset: serial-number;  /* Set the serial number counter to 0 */
}

tr td:nth-child(3):before {
  counter-increment: serial-number;  /* Increment the serial number counter */
  content: counter(serial-number);  /* Display the counter */
}

＆＃13;

<table>
<tr>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>D</td>
<td></td>
<td></td>
</tr>
<tr>
<td>E</td>
<td></td>
<td></td>
</tr>
<tr>
<td>F</td>
<td></td>
<td></td>
</tr>
<tr>
<td>G</td>
<td></td>
<td></td>
</tr>

</table>

＆＃13;

CSS为每行添加自动编号

1 个答案: