jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法

公開日:  最終更新日:2015/12/16

jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法 動くテーブル作成について
このブログでは、jqueryを使ったプラグインということで、今までも画像をスライドさせるものなどいくつか紹介してきました。ただ、プラグインを使うとなるとjquery以外にも別途ファイルをダウンロードして設置する必要があります。
それって、設置する際の1つのハードルですよね。そこがよく分からなかったから断念してしまう人も多いのではと思います。

そこで、本日はシンプルな方法での実装方法を紹介します。

スポンサードリンク

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>を定期的に移動するサンプル

セル<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>の関連記事もよければご覧ください

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




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

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

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑