Javascript-форум - Добавление нумерации строк в таблице

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Добавление нумерации строк в таблице (https://javascript.ru/forum/jquery/75741-dobavlenie-numeracii-strok-v-tablice.html)

Добавление нумерации строк в таблице

Добрый день! есть несколько таблиц на одной странице такого типа:

<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>

в первую ячейку заносим нумерацию

jQuery('.price tbody tr:not(.topRowTable').each(function(i) {
			var number = i + 1;
			jQuery(this).find('td:first').text(number+".");
		});

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

jQuery('.price tbody').each(function() {
    jQuery(this).find('tr:not(.topRowTable)').each(function(i) {
        jQuery(this).find('td:first').text(++i + ".");
    });
});

face2005,
для этого достаточно css!!!

Спасибо, Nexus! но что-то не хавает..

а, вот пропущенная кавычка и лишняя
jQuery(this).find('tr:not(.topRowTable').each(function(i) {

но все равно не пашет

face2005,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body {
       background-color: #7B68EE;
   }

  .price {
    counter-reset: list;
    color: #FFFFFF;
    border: #000000 1px solid;
    margin: 5px auto;
   }
   .price tr:nth-child(n + 1) td:nth-child(1):before{
    text-align: center;
    counter-increment: list;
    content: counter(list)".";
    color: #eac02f;
  }

  </style>

</head>

<body>
<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>
<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>

face2005, у вас в коде ошибка была, которую я не заметил.
Код в комментарии №2 поправил.

Цитата:

Сообщение от face2005

но что-то не хавает..

селектор поправьте
find('tr:not(.topRowTable)').

Цитата:

Сообщение от face2005

но все равно не пашет

Не верю.

<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>
<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>
<table class="price">
<tbody>
<tr class="topRowTable">
<th class="colNamber" scope="col">№</th>
<th class="colNameWork" scope="col">Вид работ</th>
<th class="colPrice" scope="col">ЦЕНА</th>
</tr>
<tr>
<td></td>
<td>Первичный осмотр и консультация</td>
<td>бесплатно</td>
</tr>
<tr>
<td></td>
<td>Диагностическая консультация (консультация по КТ,ОПТГ)</td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>Прицельная рентгенография (радиовизиограф)</td>
<td>80</td>
</tr>
<tr>
<td></td>
<td>ЭОД (Электроодонтометрия)</td>
<td>100</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
jQuery('.price tbody').each(function() {
    jQuery(this).find('tr:not(.topRowTable)').each(function(i) {
        jQuery(this).find('td:first').text(++i + ".");
    });
});
</script>

Цитата:

Сообщение от Nexus

Код в комментарии №2 поправил.

Спасибо большое!

Всем спасибо!