javascript 自动编号表格行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17012421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto-number table rows?
提问by Michael
I have the following HTML table:
我有以下 HTML 表：
<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.
我希望此表中的每一行都有一个自动分配给每个项目的编号。
How could he do?
他能怎么办？
回答by David says reinstate Monica
The following CSS enumerates table rows (demo):
以下 CSS 枚举表格行（演示）：
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>If the CSS cannot be used, try the following JavaScript code (demo):
如果无法使用 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>回答by user3691833
And if you would use headers as well the following is the thing you need: http://jsfiddle.net/davidThomas/7RyGX/
如果您也使用标题，那么您需要以下内容：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;
}
note the: ":not(:first-child)" in there.
注意：“:not(:first-child)”在那里。
回答by ConnorsFan
Here is a modification of David Thomas' CSS solution that works with or without a header row in the table. It increments the counter on the first tdcell of each row (thereby skipping the row with only thcells):
这是对 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;
}
You can see the behavior in this jsfiddle.
你可以在这个 jsfiddle 中看到行为。
回答by maioman
Here's a javascript solution that will add a cell at the beginning of each row , this cell will be used for numbering, if there is a thcell this gets a colspan=2attribute.
这是一个 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>