Нумерация строк таблицы html

Автоматическая нумерация строк таблицы?

Я бы хотел, чтобы каждая строка в этой таблице автоматически присваивала номер каждому элементу. Как он мог это сделать?

Можете ли вы указать, что именно вы хотите, и по какой причине вы хотите этого добиться. Это поможет нам помочь вам повысить эффективность.

4 ответа

Следующий CSS перечисляет строки таблицы (demo):

table < counter-reset: rowNumber; >table tr < counter-increment: rowNumber; >table tr td:first-child::before

table < counter-reset: rowNumber; >table tr < counter-increment: rowNumber; >table tr td:first-child::before

Если 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

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

+1 Я удалил свой ответ, поскольку не удосужился предоставить исправление для .textContent , но я действительно рекомендовал бы использовать коллекции .rows и .cells , которые предоставляются автоматически вместо getElementsByTagName() и .children .

Код CSS работает для меня, но первый td начинается с 2. вместо 1. Возможно, он считает th как td и, следовательно, начинается с 2 . В любом случае, вы можете просмотреть его здесь: benia.biz/pricing . .. Был бы признателен за решение для этого и с удовольствием дал бы награду за это.

@Benia: просто используйте table.rows вместо table.getElementsByTagName(‘tr’) как уже упоминалось в первом комментарии?

И если вы также будете использовать заголовки, то вам понадобится следующее: http://jsfiddle.net/davidThomas/7RyGX/

table < counter-reset: rowNumber; >table tr:not(:first-child) < counter-increment: rowNumber; >table tr td:first-child::before

обратите внимание на следующее: «: not (: first-child)».

Вы связались с демонстрацией JS Fiddle, которая не включает jQuery в ваш вопрос. Если вы добавите jQuery и (предположительно) удалите CSS в той JS Fiddle, которая уже заставляет его работать, а затем нажмете кнопку «Обновить» в верхней части экрана, у вас будет демонстрация, которая демонстрирует ваш код, а не мой , Что должно быть более полезным для вас, я думаю. В противном случае вы можете использовать фрагменты стека для встраивания кода, основанного на интерфейсе (HTML, CSS и JavaScript), в ваш ответ (нажмите « Изменить» , а затем кнопку над текстовой областью).

Вот модификация CSS-решения David Thomas, которая работает с или без строки заголовка в таблице. Он увеличивает счетчик в первой ячейке td каждой строки (тем самым пропуская строку только с ячейками th ):

table < counter-reset: rowNumber; >table tr > td:first-child < counter-increment: rowNumber; >table tr td:first-child::before

Вы можете увидеть поведение this jsfiddle.

Источник

Автоматическая нумерация строк таблицы | CSS

Как сделать, чтобы в ячейках первого столбца был порядковый номер 1,2,3. строки

  Первая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Вторая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка 

Что нужно сделать, чтобы в нескольких HTML-таблицах не прерывалась нумерация строк

 .demotable < counter-reset: schetchik; >.demotable table < border-collapse: collapse; >.demotable tr < counter-increment: schetchik; >.demotable td, .demotable tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tr:before Первая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Вторая таблица вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка 

Как сделать подпункты во вложенных таблицах

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tr < counter-increment: schetchik; >.demotable td, .demotable tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tr:before  вторая ячейка третья ячейка вторая ячейка  вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейка третья ячейка 

   вторая ячейка третья ячейка вторая ячейка  вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейка третья ячейка 

Как вывести итоговое количество строк таблицы

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik; /* сосчитать только tr в tbody */ > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

Как изменить начальное значение счётчика

 .demotable < border-collapse: collapse; counter-reset: schetchik 7; > .demotable tbody tr < counter-increment: schetchik; >.demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

Подсчёт в обратном порядке

 .demotable < border-collapse: collapse; counter-reset: schetchik 7; /* нужно знать общее количество */ > .demotable tbody tr < counter-increment: schetchik -1; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody < display: flex; flex-flow: column-reverse nowrap; > .demotable tbody tr < display: flex; flex: 1; counter-increment: schetchik; > .demotable tbody td .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik 2; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

 .demotable < border-collapse: collapse; counter-reset: schetchik; >.demotable tbody tr < counter-increment: schetchik 1; >.demotable tbody tr.raz2 < counter-increment: schetchik 7; > .demotable td, .demotable tbody tr:before < padding: .1em .5em; border: 1px solid #E7D5C0; >.demotable tbody tr:before < display: table-cell; vertical-align: middle; >.demotable tbody tr:before, .demotable b:after  Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

   Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика): 

   Начальное значение счётчика: вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка вторая ячейкатретья ячейка Всего (итоговое значение счётчика):