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

jquery

by आर्थर

HTML

<!-- Автоматическая нумерация строк в таблице -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script>
    $(function() {
        $('#count td:first-child').each(function(i) {
            $(this).html(i + 1);
        });

    });
</script>
<!-- Автоматическая нумерация строк в таблице
end./ table td:first-child / -->

<!--Старт table -->
<table id="count" class="smtable">
    <caption>2013 р. Атрибуты, значение и их роль в поисковых системах Google vs. Яндекс</caption>
    <tr>
        <th colspan="3">
            <center>персонализированные теги</center>
        </th>
        <th colspan="2">поддержка</th>
    </tr>
    <tr>
        <th>№</th>
        <th>мета-тег</th>
        <th>язык разметки</th>
        <th>Яндекс</th>
        <th>Google</th>
    </tr>
    <tbody>
        <tr>
            <td></td>
            <td><span class="tooltip"><a href="#"><strong>none</strong></a><em>Эквивалент NOINDEX, Nofollow<i></i></em></span>

            </td>
            <td>хз</td>
            <td>нет</td>
            <td>да</td>
        </tr>
        <tr>
            <td></td>
            <td><span class="tooltip"><a href="#"><strong>---</strong></a><em>Альтернативный текст<i></i></em></span>

            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td></td>
            <td><span class="tooltip"><a href="#"><strong>---</strong></a><em>Альтернативный текст<i></i></em></span>

            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </tbody>
</table>
<!--Конец table -->

CSS

a{/* Цвет ссылок */color:#000}
strong,b{/* полужирное начертание*/font-weight:bold}
pre,[contenteditable],.kodtextarea{/* Старт. тег pre*/margin:10px 0 10px 10px;padding:10px;color:#3f0309;font:90% normal helvetica, sans-serif;border-left:4px solid #d2bf94;white-space:pre-wrap;word-wrap:break-word;position:relative}
/* Конец. тег pre*/.post-body blockquote{/* Старт. тег blockquote*/color:#3f0309;border:1px solid #d2bf94;padding:10px;border-radius:4px;box-shadow:0 1px 4px #d2bf94, 0 0 40px #f3e7cc inset}
/* Конец. тег blockquote*/a.order{/* Старт. Кнопка order*/background:0;background:0;background:0;background:0;text-decoration:none;text-align:right}
a.order:hover{background-image:0;background-image:0;background-image:0;background-image:0;text-decoration:none;text-align:right}
/* Конец. Кнопка order*/.smtable{/* Старт. Каталог --> */color:#323232;border:1px solid #aaa;border-collapse:collapse;/* Убираем двойные линии между ячейками */text-align:left;width:100%}
.smtable td,.smtable th{border:1px dashed #C2C2C2;background:#FFF}
.smtable tr:hover td{background:#F7EFDE/* Цвет td при наведении */}
.smtable th{background:#f7f3ea/* Цвет фона */}
tbody a{color:#000;text-decoration:none/* Отменяем подчеркивание у ссылки */}
tbody tr:hover a{color:red;text-decoration:none/* Отменяем подчеркивание у ссылки */}
tbody strong,tbody b{font-weight:normal/* нормальное начертание */}
/* Старт. Каталог --> Альтернативний текст */.tooltip{position:relative/* Относительное позиционирование */}
.tooltip em{display:none/* Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было */}
.tooltip:hover em{font-style:normal;/* Обычное начертание текста.*/display:block;/* display: block;  Происходит перенос строк в начале и в конце содержимого */position:absolute;/* position: absolute;  Абсолютное позиционирование */width:520px;/* Ширина блока */background:#fff;color:#000;/* Цвет т.. */padding:3px 5px;/* Поля вокруг...