HTMLをjavascriptから動的に操作する場合、jQueryを使用すると便利です。
本記事では、HTMLの中でも特にtableタグに対して、行の追加･削除を行うためのサンプルを説明します。
単純な追加･削除に加えて、アニメーション処理をつけた場合のサンプルも有ります。
また、本記事の最後に、各処理の動作を確認できるボタンを用意しています。
行の追加
最終行にデータを追加する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
getRowData = function() {
var sysDate = new Date();
return '<tr><td>メッセージです</td><td>' + sysDate + '</td></tr>';
}
$(document).ready(function(){
$( "#btnTest11" ).click(function () {
// 最後の行に追加
$('#target').append( getRowData() );
});
});
</script>
<input type="button" id="btnTest11" value="最終行に追加" />
<table id="target">
<tr>
<th style="width:200px;">メッセージ</th>
<th style="width:250px;">登録時刻</th>
</tr>
</table> |
最初の例は、tableタグに行を追加する方法です。
はじめなので各行の内容を詳細に確認していきます。
○1行目
jqueryのライブラリをロードしています。
○4～7行目
追加ボタンの処理でtableタグに追加する行情報を返しています。
○22行目
追加ボタンです。
この例では、ボタンにid”btnTest11″を指定しています。
○23～29行目
追加される対象のテーブルです。
こちらもボタン同様id”target”を指定しています
○14～19行目
追加ボタンがクリックされたときのイベントハンドラです。
大枠は以下の構成になっています。
$( “#btnTest11” ).click( function(){…} );
この記述で、idが”btnTest11″のタグがクリックされたらfunction()の処理が実行されます。
次にfunctionを見ると、以下の処理が記載されています。
$(‘#target’).append( getRowData() );
これは、最初の$(‘#target’)で、行を追加するtableタグを決定しています。
次に、決定したtableに対してappend()で行を追加します。
登録する行データは、先ほど説明したgetRowData()メソッドより受けとっています。
行番号を指定して追加する
1 2 3 4 | $( "#btnTest12" ).click(function () { var rowNo = 0; // 1行目の後に追加 $( '#target tr' ).eq( rowNo ).after( getRowData() ); }); |
これ以降は、ボタンクリックの処理だけを記載します。
(クリックのイベントハンドラ以外は、1つ目のサンプルと全て同じです。)
$( ‘#target tr’ ).eq( rowNo )で、指定した行のtrタグを取得できます。
取得したtrタグの後ろに、afterメソッドで行データを追加しています。
rowNoはヘッダ行も含むことと、rowNoの行だけデータが存在しない場合はデータが追加されない事に注意が必要です。
フェードインのアニメーション付き追加する
1 2 3 4 5 6 7 8 9 10 11 | $( "#btnTest13" ).click(function () { // 最後の行に追加(アニメーション有) $('#target').append( getRowData() ); $( '#target tr:last' ).hide().fadeIn( 500 ); }); $( "#btnTest14" ).click(function () { var rowNo = 0; // 1行目の後に追加(アニメーション有) $( '#target tr' ).eq( rowNo ).after( getRowData() ); $( '#target tr' ).eq( rowNo+1 ).hide().fadeIn( 500 ); }); |
最初の2つの例では、行の追加時にどこに行が追加されたかが分かり辛いというデメリットがあります。
この例では、追加された行をフェードインのアニメーション表示させるため、どの行が追加されたが分かりやすいです。
前者の例は最終行、後者の例は指定した行にデータを追加しています。
行っていることは、行を一旦追加した後、対象行を一旦hide()で非表示にした後fadeIn()でフェードインさせています。fadeIn()には引数の指定が可能で、例の場合は500mSecかけてフェードインさせています。また、引数を省略した時は400が指定されたとみなされます。
スライドダウンのアニメーション付き追加する
1 2 3 4 5 6 | $( "#btnTest15" ).click(function () { // 最後の行に追加(slideアニメーション有) $('#target').append( getRowData() ); $( '#target tr:last' ).find('td').wrapInner('<div style="display: none;" />'); $( '#target tr:last' ).find('td > div').slideDown( 500 ); }); |
今度は新しい行追加時に、スライドさせるアニメーションを行う例です。
サンプルコードを見ると、気持ちとしては$( ‘#target tr:last’ ).hide().slideDown( 500 );と書きたいところでが、残念ながらtdタグはblock要素ではないので直接slideDown()を適用することができません。この為tdの中にダミーのdivを一旦追加し、divをアニメーションさせる形をとります。
行の削除
行を指定して削除する
1 2 3 4 | $( "#btnTest21" ).click(function () { var rowNo = 2; // 3行目を削除 $( '#target tr' ).eq( rowNo ).remove(); }); |
行番号を指定して、行を削除します。
最初、最後の行を削除する場合は、$( ‘#target tr’ ).eq( rowNo )の替わりに以下の記述が可能です。
最初の行: $( '#target tr:first' ).fadeOut(... 最初の行: $( '#target tr:last' ).fadeOut(... |
フェードアウトのアニメーション付き削除する
1 2 3 4 | $( "#btnTest22" ).click(function () { var rowNo = 2; // 3行目を削除(アニメーション付) $( '#target tr' ).eq( rowNo ).fadeOut( 500, function(){$(this).remove();} ); }); |
フェードアウトのアニメーションつきで行を削除します。
fadeOutは2つ引数をとることができ、第一引数はアニメーション時間(msec)、第二引数がアニメーション終了後の処理内容です。
行の削除はアニメーションが終わった後で実施したいので、第二引数でremove()をコールしています。
全ての行を全削除する
1 2 3 4 | $( "#btnTest23" ).click(function () { // ヘッダ以外の全行を削除 $( '#target' ).find("tr:gt(0)").remove(); }); |
1行目はヘッダ行なので、.find(“tr:gt(0)”)で2行め以降の全行を抽出し、remove()を行います。
テーブル内の行ではなく、テーブル自体を削除したい場合は、$( ‘#target’ ).remove();で消すことができます。
サンプル
本記事で説明した各処理のサンプルです。各ボタンを押して、それぞれの処理がどのように動作するかを確認することができます。
| メッセージ | 登録時刻 |
|---|
関連記事
勉強