Автоматическая нумерация строк в таблице
Я частенько использую таблицы для отображения табличных данных. Нередко строки в этих таблицах нумеруются. Вручную задавать номер строки не айс. Давайте напишем скрипт, который будет автоматически проставлять номер строки? Готовы? Поехали...
Наш скрипт будет автоматически нумеровать строки заданной нами таблицы. Прежде чем приступить к написанию скрипта, давайте создадим саму таблицу:
<table class="table"> <tr> <td></td> <td>Первая строка</td> </tr> <tr> <td></td> <td>Вторая строка</td> </tr> <tr> <td></td> <td>Третья строка</td> </tr> </table>
Я создал простенькую таблицу, состоящую из 3 строк. В каждой строке всего 2 ячейки. Первая - пустая (в ней будет отображен порядковый номер строки), во второй написано какая это строка.
Теперь пишем скрипт, который содержит следующее:
$('.table tbody tr').each(function(i) { var number = i + 1; $(this).find('td:first').text(number+"."); });
Сам скрипт делает следующее: находит таблицу с классом table, и потом в каждой строке в первую ячейку (td:first) добавляет порядковый номер строки, начиная от 1.
Все довольно просто. Помните, что для работы скрипта необходимо подключить свежую библиотеку JQuery. Скрипт для автоматической нумерации строк в таблице нужно подключать в конец страницы (или после нужной таблицы). Приведу весь код целиком:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <table class="table"> <tr> <td></td> <td>Первая строка</td> </tr> <tr> <td></td> <td>Вторая строка</td> </tr> <tr> <td></td> <td>Третья строка</td> </tr> </table> <script> $('.table tbody tr').each(function(i) { var number = i + 1; $(this).find('td:first').text(number+"."); }); </script> </body> </html>