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

公開日:  最終更新日:2021/11/30

jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法 動くテーブル作成について
このブログでは、jqueryを使ったプラグインということで、今までも画像をスライドさせるものなどいくつか紹介してきました。jQueryプラグインを使えば複雑な機能をもったパーツ等を実装することができます。うまく使いこなせばとても便利で助かります。

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

そこで、本日はレイアウトなどに使うこともある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つある5行の表になります。1行の中に<TD></TD>のセルが5つあります。
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行のみの記述になっています。

セル<TD>を数秒ごとに移動する動作サンプル


こちらのサンプルも繰り返しセルが移動されます。たくさんの商品画像、バナー等掲載しておいて、省スペースで掲載することもできそうです。

商品情報などを<TABLE>タグで陳列しているなら、簡単に動かす仕組みに出来る

ショップに商品を陳列している部分には<TABLE>を使っていることが多いのではないでしょうかね。
今回紹介した方法を使えば、jqueryファイルの読み込みと数行記述するだけで簡単に実装することが出来ます。


↑↑↑以前作ってみたツールがちょうどTABLEタグで商品を陳列するタグを生成するので今回紹介した記述を追記したサンプルを紹介します。文字色、画像サイズなどある程度、見た目調整も出来るので商品陳列されたTABLEタグを上記ツールでまずは生成します。

そこに、jqueryを読み込む記述と定期的に移動させる記述を追加してやれば、下記のようなサンプル完成です。

1点だけ記述について、生成されるタグのTABLEのクラス名が
<table class=”rakurakutable”>となっているので、そこだけ注意してくださいね

↑のサンプルソースで、「mytable」となっている部分を「rakurakutable」にする必要があります。


行が移動するサンプル

セルが移動するサンプル


別htmlファイルとして作成して、<IFRAME>で埋め込んで利用すれば省スペースな場所に設置することも出来ます。

例えば、行移動を<IFRAME>で埋め込む際に1行分の高さだけ表示したり、セル移動を1商品だけみえるように埋め込んだりしておけば、省スペースで色々な商品を見せることが可能です。ぜひ、活用してみてください。

<TABLE>の関連記事もよければご覧ください

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法




Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑