表TABLEの行TRやセルTDをjQueryのみでフェードを簡単な実装方法

公開日：2014/02/02 最終更新日：2021/11/30

このブログでは、jqueryを使ったプラグインということで、今までも画像をスライドさせるものなどいくつか紹介してきました。jQueryプラグインを使えば複雑な機能をもったパーツ等を実装することができます。うまく使いこなせばとても便利で助かります。

ネットショップ運営の気になる備忘録

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ただ、プラグインを使うとなるとjquery以外にも別途ファイルをダウンロードして設置する必要があります。それって、設置する際の１つのハードルですよね。そこがよく分からなかったから断念してしまう人も多いのではと思います。

そこで、本日はレイアウトなどに使うこともあるTABLEタグを使ったシンプルな方法で画像などを自動的に切り替える実装方法を紹介します。

jQueryのみで＜TR＞や＜TD＞などの要素を動かすのは意外と簡単に実装可能

行＜TR＞、セル＜TD＞を自動的に動かして動きのある表にしたいって需要は結構あるのではないかと思います。

本日紹介する方法はjqueryのファイルと数行記述を追加するだけで実装が出来る内容になります。別途プラグインのファイルをダウンロードする必要はありません。

さて、まずは
http://jquery.com/よりjquery.min.jsをダウンロードしてください。
（すでにファイルがある場合は不要です。）

＜TR＞行を数秒ごとに移動するサンプルソース

サンプルソース sample1.html

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
timer = setInterval(function(){
    $('table.mytable tr:last').prependTo('table.mytable').hide().fadeIn(2000);
}, 5000);
</script>
 
<table class="mytable">
<tr><td>1</td><td><img src="画像URL"></td><td>商品名1</td><td>1,000円</td></tr>
<tr><td>2</td><td><img src="画像URL"></td><td>商品名2</td><td>1,000円</td></tr>
<tr><td>3</td><td><img src="画像URL"></td><td>商品名3</td><td>1,000円</td></tr>
<tr><td>4</td><td><img src="画像URL"></td><td>商品名4</td><td>1,000円</td></tr>
<tr><td>5</td><td><img src="画像URL"></td><td>商品名5</td><td>1,000円</td></tr>
</table>

1行目でjqueryのファイルを読み込んでいます。

2～6行目が今回のポイントになる部分です。このサンプルでは行を定期的に移動する処理を記述しています。

3行目 timer = setInterval(function(){ は気にせずこのまま使いましょう。

4行目
$(‘table.mytable tr:last’).prependTo(‘table.mytable’).hide().fadeIn(2000);
これを簡単に説明すると、テーブルの先頭に最後の行を移動してね。となります。
.hide().fadeIn(2000);の部分は2秒間かけてフェードインしながら表示する。
この行が定期的に実行されていくことになります。

5行目では、何秒おきに動かすかを指定しています。5000は5秒になります。
という感じで5秒ごとに、テーブルの先頭に最後の行を移動するという処理が記述されています。

8行目から14行目＜table＞タグの記述部分は＜TR＞＜/TR＞が５つある5行の表になります。1行の中に＜TD＞＜/TD＞のセルが５つあります。
1点だけjavascriptを記述する部分と揃える必要があるのが class=”mytable” とクラス名を指定しているところです。

行＜TR＞を定期的に移動するサンプル

繰り返し行を入れ替え続けるようになっているので、止まることはありません。1週したら、最初に戻ります。

セル＜TD＞を数秒ごとに移動するサンプルソース

サンプルソース sample1.html

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
timer = setInterval(function(){
    $('table.mytable tr td:last').prependTo('table.mytable tr').hide().fadeIn(2000);;
}, 5000);
</script>
 
<table class="mytable">
<tr>
  <td>画像1</td>
  <td>画像2</td>
  <td>画像3</td>
  <td>画像4</td>
  <td>画像5</td>
</tr>
</table>

さきほどの、記述とほぼ同様の記述で実装することが出来ます。

4行目の要素を指定する部分が変わってきます。

今回は、TDを移動したいので、$(‘table.mytable tr td:last’) となります。
移動先の指定も prependTo(‘table.mytable tr’) になります。
また、＜TABLE＞タグの記述も＜TR>1行のみの記述になっています。