space彩
03 « 2017 / 04 » 05
 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.
2014/10/10 Fri  22:32:29» E d i t
行にもdata要素を入れてみたので、昨日アップした記事と差し替えました。
動作テストだったのでtoggoleを使っていましたが、一応チェックボックス通りの動きに修正。
とても泥臭くいんですけど、とりあえず希望の動きはできたので(^^;。
もしも実際にclass名とdata-*を組み合わせる場合は、相互の制御を考慮する必要があります。
そんな場合があるかはわかりませんが。

テーブルの列や行の表示非表示をjQueryで制御するサンプル。
「ピンクの列」はTHのクラス名、「水色の行」はTBODYのクラス名で、「data-group-x="1"」と「data-group-x="2"」はdata-group-xが"1"か"2"で列を、「data-group-y="1"」はdata-group-y="1"の行の制御を行っています。
data属性はhtml5からの機能で、複数の属性を設定できます。
上の画像クリックでサンプル画面が開きます。

THのdata-group-x="1"の列の表示非表示制御のjQueryコード。
$('#cktest3').click(function() {
$('th').each(function(){
var colId = $(this).attr('data-group-x');
var index = colId.indexOf('1');
if(index >= 0){
var myTarget = $(this);
var myIndex = $('th').index(myTarget)+1;
if ($('#cktest3').is(':checked')){
$('th:nth-child('+myIndex+')').show();
$('td:nth-child('+myIndex+')').show();
} else {
$('th:nth-child('+myIndex+')').hide();
$('td:nth-child('+myIndex+')').hide();
};
}
});
});

TRのdata-group-y="1"での行の表示非表示制御のjQueryコード。
$('#cktest5').click(function() {
$('tr').each(function(){
var colId = $(this).attr('data-group-y');
var index = colId.indexOf('1');
if(index >= 0){
var myTarget = $(this);
var myIndex = $('tr').index(myTarget);
if ($('#cktest5').is(':checked')){
$('tr:eq('+myIndex+')').show();
} else {
$('tr:eq('+myIndex+')').hide();
};
}
});
});


コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://spaceaya.blog39.fc2.com/tb.php/2223-cfbfbd7d
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック