恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

jQueryを使って自動でナンバリング

投稿日:




今回は、表やリストなどの番号を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で自動ナンバリング/





この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

kawasaki

kawasaki

webデザイナー、まだまだ勉強中ですが… HTML/CSS、JavaScript、PHP、Photoshop、Illustratorを扱っています。