掲示板/JavaScript質問板/過去ログ/一覧/ 列の表示・非表示切り替え、

0 名前：三流： 2007/09/07（金） 19:27 ID:ZMjH7xsQ sub-hB: PL/SQLでDBからデータを引っ張り、
htmlのtableにデータを出力しています。

列の数は決まっておらず、
列単位でチェックボックスがあり、
チェック後、表示の切り替えボタンが押されると、
チェックされたチェックボックスがある列が見えなくなり、
もう一度表示切替ボタンが押されると、
全件表示されるような構造のものを作ろうと思っています。

JavaScriptでこのようなことは可能でしょうか？
教えてください。。

1 名前：匿名： 2007/09/07（金） 19:27 ID:/UQCBCoW sub-y9

可能です。

var display = true;
function toggle() {
    display = !display;
    var tr = document.getElementsByTagName('tr');
    for (var i = 0; i < tr.length; i++) {
        if (display) {
            tr[i].style.display = '';
        } else if (tr[i].getElementsByTagName('input')[0].checked) {
            tr[i].style.display = 'none';
        }
    }
}

<table>
  <tbody>
    <tr><td><input type="checkbox"></td><td>Data1</td></tr>
    <tr><td><input type="checkbox"></td><td>Data2</td></tr>
  </tbody>
</table>
<div>
  <input type="button" value="表示の切り替え" onclick="toggle()">
</div>

2 名前：三流： 2007/09/07（金） 19:27 ID:ZMjH7xsQ sub-hB

お返事ありがとうございます。
試そうと思い、構造にあうよう少し変更を加え使おうとしたのですが、
色々試しても、うまくいきませんでした(;;)
重ね重ねで申し訳ありませんが、
間違っている所指摘お願いします。。
※trの中にinputタグが入っていない場合があります。

<table>
  <tbody>
　　<tr><td>テスト</td></tr>
    <span><tr><td><input type="checkbox"></td><td>Data1</td></tr></span>
    <span><tr><td><input type="checkbox"></td><td>Data2</td></tr></span>
  </tbody>
</table>
<div>
  <input type="button" value="表示の切り替え" onclick="toggle()">
</div>

trの代わりにspanタグを使ってみました。

var display = true;
function toggle() {
    display = !display;
    var span = document.getElementsByTagName('span');
    for (var i = 0; i < span.length; i++) {
        if (display) {
            span[i].style.display = '';
        } else if (span[i].getElementsByTagName('input')[0].checked) {
            span[i].style.display = 'none';
        }
    }
}

trの中にinputタグが入っていない場合があるので途中にif分を挟んでみました、

var display = true;
function toggle() {
    display = !display;
    var tr = document.getElementsByTagName('tr');
    for (var i = 0; i < tr.length; i++) {
	if( tr[i].elements.type == "checkbox") {
	        if (display) {
	            tr[i].style.display = '';
	        } else if (tr[i].getElementsByTagName('input')[0].checked) {
	            tr[i].style.display = 'none';
	        }
	}
    }
}

3 名前：匿名： 2007/09/07（金） 19:27 ID:gWDGQ3J. sub-Cz

>>2
> trの代わりにspanタグを使ってみました。

いやいやいや、HTML 的にありえへんがな。

> 途中にif分を挟んでみました

それは GJ だけど、tr[i].elements なんて書式はどこから出てきたんだい。

function toggle () {
    var table = document.getElementsByTagName ('table')[0];
    for (var i = 0, I = table.rows.length; i < I; i++) {
        var input = table.rows[i].cells[0].firstChild;
        if (input && input.type == 'checkbox' && input.checked) {
            if (table.rows[i].style.display == 'none') {
                try {
                    table.rows[i].style.removeProperty ('display');
                } catch (err) {
                    table.rows[i].style.display = '';
                }
            } else {
                table.rows[i].style.display = 'none';
            }
        }
    }
}

# タグタグ言わんといてくれ。タグはデータのシリアル層の話であって、DOM で必要なのはタグではなくデータそのもの（要素）だ。

4 名前：匿名： 2007/09/07（金） 19:27 ID:gWDGQ3J. sub-Cz: ん？タイトルを確認したら、行（row）ではなく列（column）の話なの？

>>1-3 は行（row）として話が進んでいるわけだけど、どっち？

5 名前：匿名： 2007/09/07（金） 19:27 ID:/UQCBCoW sub-y9

列でしたか。これは失礼。

var display = true;
function toggle() {
    display = !display;
    var input = document.getElementsByTagName('thead')[0].getElementsByTagName('input');
    for (var i = input.length; i--; ) {
        if (input[i].type != 'checkbox' || !input[i].className) continue;
        if (display) {
            document.getElementById(input[i].className).style.display = '';
        } else if (input[i].checked) {
            document.getElementById(input[i].className).style.display = 'none';
        }
    }
}

<table>
  <col id="col1"><col id="col2">
  <thead>
    <tr>
      <th><input type="checkbox" class="col1"></th>
      <th><input type="checkbox" class="col2"></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Col1</td><td>Col2</td></tr>
  </tbody>
</table>
<div>
  <input type="button" value="表示の切り替え" onclick="toggle()">
</div>

6 名前：匿名： 2007/09/07（金） 19:27 ID:gWDGQ3J. sub-Cz

日本語だと縦横どちらも列になりうるから、スレ主の意向はどっちかな。

>>5
とても細かいこと聞くけど、

.style.display = '';

この書式は本当に妥当なのですか？私はこの出典を知らないので、よろしければ教えて下さい。

7 名前：匿名： 2007/09/07（金） 19:27 ID:/UQCBCoW sub-y9: >>6
IEが対応してさえいれば table-row を使いたいのですよ。

http://www.h-fj.com/blog/archives/2007/05/06-134912.php
http://aol.okwave.jp/qa3020596.html

8 名前：匿名： 2007/09/07（金） 19:27 ID:gWDGQ3J. sub-Cz

>>7
えーと、私がお聞きしたかったのは以下のことなんですよ。

CSS 値として不正な値をセットしたとき、以下の可能性があります。

・未知の値として無視する（CSS2: 4.2）
・不正な値として SYNTAX_ERR を投げる（DOM2CSS: 2.2）
・不正な値をセットされたプロパティを削除する（初期値に戻る）

例えば、

.style.display = 'impossible';

としたとき、Firefox、Opera は CSS パースエラーを投げて宣言を無視し、IE は不正な値として JScript エラーを投げ、Safari（および昔の Gecko）はプロパティを削除して初期値に戻します。

ところが、実装によっては特定の値のときに初期値に戻すことがあります。

.style.display = undefined;  // Safari で初期値に戻る（Safari は何でも良い）
.style.display = null;       // Firefox と Safari で初期値に戻る
.style.display = '';         // IE、Firefox、Opera、Safari で初期値に戻る

この「初期値に戻る」というのは実装依存なのですか？それとも空文字列（と null も？）を特別扱いする根拠はあるのか？ということです。まあ要するに、私は空文字列代入の挙動を信用してないのですよ。もしも後発の（CSS2/DOM2CSS に準拠した）実装が現れた場合に対応が面倒くさい。

もし実装依存であるならば、>>3 に書きましたが removeProperty('display') で初期値に戻すべきです。removeProperty を持たない IE のみ経験則で空文字列代入しましたが、この程度の分岐なら大した手間ではないし。

ちなみに現在、DOM3CSS（CSSOM）の草案準備段階で、CSSStyleDeclaration#setProperty() で「null もしくは空文字列を与えたときは removeProperty() を呼ぶ」という文言が入りました。その意味では安心して良いのかもしれませんが、DOM3CSS は DOM2CSS の上位互換ではないし、未だ草案ですらないからなあ。

すみません、脱線が過ぎました。

9 名前：三流： 2007/09/07（金） 19:27 ID:3i3WTpDq sub-zH: 返信ありがとうございますm(_ _)m
おかげ様で望みの動きが出来ました。。

htmlやJavascriptはブラウザによって大分変わるんですね・・・気をつけます。
今回はクライアントのブラウザや色々な環境が決まっているので、
安定して動かすことが出来そうです( - _ - )イイ!

10 名前：匿名： 2007/09/07（金） 19:27 ID:k58nPpF. sub-Cz

今さら age るのもどうかと思ったが、

>>8
ぐだぐだ言ってないで visibility: collapse 使えば良かったんだ。恥ずかしい。

var r = table.rows[i];

/*@cc_on @if (@_jscript)
    if (r.style.display != 'none')
        r.style.display = 'none';
    else
        r.style.display = '';
 @else@*/
    if (r.style.removeProperty ('visibility') != 'collapse')
        r.style.setProperty ('visibility', 'collapse', '');
/*@end@*/