はじめに
以前、jQueryを使って表のアイテムを動かしましたが、今回は表の行にあれこれする処理を紹介します。
行の追加と削除
jQueryでの行追加、削除は
・$(テーブルアクセス).insertRow(削除行);
・$(テーブルアクセス).deleteRow(削除行);
を使用します。
これらを利用し、動的に行を追加したり削除するような機能を作っていきます。
html
<HEAD>
<SCRIPT src="ui/libs/jQuery-1.7.1.js"></SCRIPT>
</HEAD
<TABLE>
<TR>
<TD>追加</TD>
<TD>削除</TD>
<TD>データ</TD>
</TR>
<TR>
<TD><input type="button" name="btn_ins" value="回" /></TD>
<TD><input type="button" name="btn_del" value="回" /></TD>
<TD>テストデータ</TD>
</TR>
</TABLE>
js
$('input:button[name="btn_ins"]').on('click',function(){
var objTbl = $(this).closest('table')[0];
// 表の一番下に行追加
objTbl.insertRow(-1);
});
$('input:button[name="btn_del"]').on('click',function(){
var objTbl = $(this).closest('table')[0];
// 表の一番下の行を削除
objTbl.deleteRow(-1);
});
#親と子の行を作成する
例として親を都道府県、子を名産として行を表示する表を作成します。
親と子の行の区別はTRのname属性を利用します。
class属性とcssを用いて親の行の背景色を変更すると、よりそれっぽく見えます。
index.html
<input type="button" name="btn_ins_p" value="親の行追加" />
<TABLE>
// ヘッダ行
<TR name="header">
<TD>追加</TD>
<TD>削除</TD>
<TD>都道府県</TD>
<TD>名産品</TD>
</TR>
// データ行
<TR name="parent" class="tbl_bg_p">
<TD><input type="button" name="btn_ins" value="回" /></TD>
<TD><input type="button" name="btn_del" value="回" /></TD>
<TD><input type="text" name="prefecture" value="香川県" /></TD>
<TD><input type="text" name="meisan" value="" /></TD>
</TR>
<TR name="child" class="tbl_bg_c">
<TD></TD>
<TD><input type="button" name="btn_del" value="回" /></TD>
<TD><input type="text" name="prefecture" value="" /></TD>
<TD><input type="text" name="meisan" value="讃岐うどん" /></TD>
</TR>
<TR name="child" class="tbl_bg_c">
<TD></TD>
<TD><input type="button" name="btn_del" value="回" /></TD>
<TD><input type="text" name="prefecture" value="" /></TD>
<TD><input type="text" name="meisan" value="オリーブオイル" /></TD>
</TR>
</TABLE>
親の行なら背景色を黄色に、子の行なら背景色を白に設定します。
index.css
.tbl_bg_p{
background-color:"yellow";
}
.tbl_bg_c{
background-color:"white";
}
jsファイルでは、追加ボタンを押下したときにそのボタンの真下に行を追加する処理と、削除ボタンを押下したときに行を削除する処理を作成します。
この行は削除ボタン押下で対象の行のみ削除しますが、親の行の削除ボタンを押下した場合は紐づいている子の行も同時に削除します。
index.js
// 親の行の追加ボタンを押下したときの処理
$('input:button[name="btn_ins"]').on('click',function(){
// テーブル、行の情報を取得
var objTbl = $(this).closest('table')[0];
// 行の追加
var insertRow = objTbl.insertRow(-1);
// 親属性の追加
insertRow.attr('name','parent');
insertRow.addClass('tbl_bg_p');
});
// 追加ボタンを押下したときの処理
$('input:button[name="btn_ins"]').on('click',function(){
// テーブル、行の情報を取得
var objTbl = $(this).closest('table')[0];
var objRow = $(this).closest('tr')[0];
// 対象の行のインデックス
var rowIndex = objRow.rowIndex;
// 追加する行は次の行(+1)
var targetRow = rowIndex + 1;
// 行の追加
objTbl.insertRow(targetRow);
// 子属性の追加
insertRow.attr('name','child');
insertRow.addClass('tbl_bg_c');
});
// 削除ボタンを押下したときの処理
$('input:button[name="btn_del"]').on('click',function(){
// テーブル、行の情報を取得
var objTbl = $(this).closest('table')[0];
var objRow = $(this).closest('tr')[0];
// 対象の行のインデックス
var rowIndex = objRow.rowIndex;
var nextRowIndex = rowIndex + 1;
var curTR = objTbl.rows[rowIndex].attr('name');
var nextTR;
var flag = true;
if(curTR = "child"){
objRow.deleteRow(rowIndex);
return;
}
while(flag){
nextTR = objRow.attr('name');
// 最後の行以外
if(typeof nextTR != "undefined"){
objRow.deleteRow(rowIndex);
}
}
});
おわりに
今回紹介した機能は、行を動的に追加したり削除する少し複雑なものとなりました。
HTMLとJavascriptを勉強する上でTABLEへのアクセスは切っても切り離せない関係にあると思います。
デザインとしては少し旧型な印象を受けてしまいますが、実現するにあたってJavascriptとJqueryを駆使していかに行アクセスをするかを試行錯誤し、より機能的なページを実現しようと思います。