今回は、表やリストなどの番号をjQueryを使って自動で追加する方法をご紹介します
jQueryのコードを書く!
コードはシンプルです
$(function(){
$("番号を付けたいタグやクラス").each(function (i) {
i = i+1;
$(this).text(i);
});
});
HTMLの例
例としてtableのリストに番号をつけてみました!
classがついている箇所に番号が追加されていきます。ついてない箇所は、空白で飛ばされます。
<table>
<tr>
<th>番号</th>
<th>場所</th>
<th>時間</th>
</tr>
<tr>
<td class="no"></td>
<td>渋谷</td>
<td>13:00</td>
</tr>
<tr>
<td></td>
<td>原宿</td>
<td></td>
</tr>
<tr>
<td class="no"></td>
<td>表参道</td>
<td>17:00</td>
</tr>
</table>
こうなります!!
番号 | 場所 | 時間 |
---|---|---|
渋谷 | 13:00 | |
原宿 | ||
表参道 | 17:00 |
jQueryの例その2
今度は、逆にクラスがついていない部分に番号をつけていきます!
$(function(){
$(".numbering tr td:first-child").not('.nonumber').each(function (i){
i = i+1;
$(this).text(i);
});
});
最初のtdかつ.nonumberがないtdを繰り返し処理します!
HTMLのコードその2
<table class="numbering">
<tr>
<th>番号</th>
<th>場所</th>
<th>時間</th>
</tr>
<tr>
<td></td>
<td>渋谷</td>
<td>13:00</td>
</tr>
<tr>
<td class="nonumber"></td>
<td>原宿</td>
<td></td>
</tr>
<tr>
<td></td>
<td>表参道</td>
<td>17:00</td>
</tr>
</table>
見え方としては同じものですが、cssなどでいじったりするときなど
使い分けてみてください!
順番変更や、間の削除ってなったとき自動だと数字を書き換えなくていいので楽ですよね!
是非活用してみてください!
参考サイト
https://beanb.wordpress.com/2014/05/31/jqueryで自動ナンバリング/