Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Javascript: нумерация строк в таблице (https://javascript.ru/forum/dom-window/26291-javascript-numeraciya-strok-v-tablice.html)

TITAN-UZ 03.03.2012 16:21

Javascript: нумерация строк в таблице
 
Ест CMS с блогом хотел поставит нумерацию каждого блога! Список в таблице!

Нашел такой способ нумерации

<span id='result'></span>

<table id='tbl'....>
....
</table>
<script>
document.getElementById('result').innerHTML=docume nt.getElementById('tbl').getElementsByTagName('tr' ).length-1
</script>



но показывает номер только 1 строку остальное без нумерации!

как решит проблему!

Pavel M. 03.03.2012 20:22

можно так
для быстроты, использовал jQuery
<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
	<script>
		$(function(){
			$('table td:first-child').each(function (i) {
				$(this).html(i+1);
			});
		});
	</script>
</head>
<body>
	<table border=1>
		<tr><td></td><td>xxx</td></tr>
		<tr><td></td><td>xxx</td></tr>
		<tr><td></td><td>xxx</td></tr>
	</table>
</body>
</html>

если старые броузеры не нужны, то можно на css нумерацию делать http://htmlbook.ru/css/counter-reset

filosofer 18.11.2012 12:56

Повторение последней цифры
 
Скрипт работает шикарно! Спасибо!:) Но мне ещё один нюанс не дает покоя... Подскажите, пожалуйста, как сделать так, что бы последнее число дублировалось.
Например:
<!DOCTYPE html>
<html>
<head>
	<title>Повторение последней цифры</title>
</head>
<body>
	<table border=1>
		<tr><td></td><td>....</td></tr> <!-- Выводит 1 -->
		<tr><td></td><td>....</td></tr> <!-- Выводит 2 -->
		<tr><td></td><td>....</td></tr> <!-- Выводит 3 -->
		<tr><td></td><td>....</td></tr> <!-- Выводит 3 -->
	</table>
</body>
</html>

Причем строк таких не конкретно 4, а может быть больше или меньше.
Главное чтобы последнее число повторялось один раз.

ksa 19.11.2012 10:19

Цитата:

Сообщение от filosofer
как сделать так, что бы последнее число дублировалось.

Модифицировать вариант от Pavel M....

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
	$('table td:first-child').each(function (i) {
		$(this).html(i+1);
	});
	$('table tr:last-child td:first-child').text($('table tr').length-1);
});
</script>
</head>
<body>
<table border=1>
	<tr><td></td><td>xxx</td></tr>
	<tr><td></td><td>xxx</td></tr>
	<tr><td></td><td>xxx</td></tr>
	<tr><td></td><td>xxx</td></tr>
</table>
</body>
</html>

Skipp 19.11.2012 10:35

Вообще, такое обычно на стороне сервера делается, тем более таблица формируется скорее всего с помощью тех же циклов.

filosofer 20.11.2012 14:12

Спасибо, ksa! Я знал, что истина, где то рядом... но так, как освоение javascript я начал как раз с первого сообщения на этом форуме... Короче, не разбираюсь я особо, а на таких практических примерах будем учиться шаг за шагом.))

dokxpi 30.03.2015 20:21

Ух.. а счёт(№) то переходит с одной таблицы на другую: начало считать внутри страницы и остановилось в подвале, там как оказалось тоже табличка имеется

Pavel M., ksa, а как привязать/прикрутить счёт к строго заданным/oму идентификатору/ам?
.., например к такому <table id="count">

рони 30.03.2015 20:30

dokxpi,
:-? $('#count td:first-child').

рони 30.03.2015 20:39

dokxpi,
для нумерации скрипты ненужны - это так на всякий случай

dokxpi 30.03.2015 21:07

И я так думал, ровно до тех пор пока таблица не превратилась в гигантское дерево..
Цитата:

Сообщение от рони (Сообщение 364018)
dokxpi,
:-? $('#count td:first-child').

Благодарю.


Часовой пояс GMT +3, время: 04:27.