Javascriptでテーブルの列の表示・非表示が出来ないものかと思い、作成しています。


//Javascript
function changeCell(){
if(document.form1.check_type.checked == true){
document.getElementById("noneLine").style.visibility = "hidden";
}else{
document.getElementById("noneLine").style.visibility = "";
}
}

//切替チェックボックス
<input name="check_type" type="checkbox" onclick="changeCell();">

//適応箇所
<table border="1">
<tr>
<th>あああ</th>
<th>いいい</th>
<th id="noneLine">ううう</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>

上記のテーブルは2行ですが、PHPで出力しますので、一定行まで下に増えていきます。

上記のJavascriptだと、見出しの「ううう」のセルは表示・非表示ができるのですが、その下の行は表示されます。
どういう風にしたら行の部分も非表示に出来るのでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2007/10/17 21:20:27
  • 終了:2007/10/18 01:28:35

回答(4件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402007/10/17 21:25:21

ポイント10pt

id="noneLine" を消したいセル?につける。

タグにこのidをつける。

id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202007/10/17 22:12:08

ポイント100pt

下記のような感じでどうでしょう。

// Javascript
function changeCell(obj){
 var CELL = document.getElementById("noneLine");
 var TABLE = CELL.parentNode.parentNode.parentNode;
 for(var i=0;TABLE.rows[i];i++) {
  TABLE.rows[i].cells[CELL.cellIndex].style.visibility =
  (obj.checked)?'hidden':'';
 }
}

//切替チェックボックス(thisを引数として追加しています。)
<input name="check_type" type="checkbox" onclick="changeCell(this);">

//テーブルはそのまま。
<||
id:kt26

まさにこれです!どうもありがとうございました。

2007/10/18 01:27:47
id:ketil No.3

ketil回答回数4ベストアンサー獲得回数02007/10/17 22:31:05

ポイント10pt

“行”というより“列”を非表示にしたいのではないでしょうか?

一番上だけthで、残りがtdだとして書きます。

//Javascript

function changeCell(){

var tar=document.getElementsByTagName('td');//いちいち書くのが面倒なので

if(document.form1.check_type.checked == true){

document.getElementById('noneLine').style.visibility="hidden";

for(i=2;i<tar.length;i+=3){//数字及び範囲は必要に応じて修正して下さい</p>

tar.style.visibility = "hidden";

}

}else{

document.getElementById("noneLine").style.visibility = "visible";

for(i=2;i<tar.length;i+=3){//</p>

tar.style.visibility = "visible";

}

}

}



これでどうでしょうか。

記述方法は人によって結構変わるので、見辛かったらすみません。

確認画面で入れてもいない</p>が入るのは仕様でしょうか?

この“はてな”自体、初めて間もないのでわかりません。すみません。

id:bloodalone No.4

bloodalone回答回数2ベストアンサー獲得回数02007/10/17 22:58:20

ポイント10pt

質問のソースのままならばchangeCell

使いまわ(せるようなものでもないですが)すならばchangeCell(className)

それぞれ呼び出し元を修正してください


最適化などは行っていません

サンプルとしてご覧ください

このようなソースでよろしいでしょうか?


<html>
<head>
<title>getElementsByClass</title>
<script type="text/javascript">
<!--
/*
function changeCell(){
	if(document.form1.check_type.checked == true){
		var e=document.getElementsByTagName('*');
		for (var i = 0; i < e.length; i++){
			if(e[i].className == 'noneLine'){
				e[i].style.display = 'none';
			}
		}
	}else{
		var e=document.getElementsByTagName('*');
		for (var i = 0; i < e.length; i++){
			if(e[i].className == 'noneLine'){
				e[i].style.display = '';
			}
		}
	}
}
/*/

function changeCell(className){
	if(document.form1.check_type.checked == true){
		var e = getElementsByClass(className);
		for (var i = 0; i < e.length; i++){
			e[i].style.display = 'none';
		}
	}else{
		var e = getElementsByClass(className);
		for (var i = 0; i < e.length; i++){
			e[i].style.display = '';
		}
	}
}

// 参照 http://blog.livedoor.jp/nipotan/archives/15424695.html
function getElementsByClass(searchClass) {
	var classElements = new Array();
	var allElements = document.getElementsByTagName("*");
	for (i = 0, j = 0; i < allElements.length; i++) {
		if (allElements[i].className == searchClass) {
			classElements[j] = allElements[i];
			j++;
		}
	}
	return classElements;
}
//*/

-->
</script>
</head>
<body>

<form name="form1">
	<input name="check_type" type="checkbox" onclick="changeCell('noneLine');">
</form>

<table border="1">
	<tr>
		<th>あああ</th>
		<th>いいい</th>
		<th class="noneLine">ううう</th>
	</tr>
	<tr>
		<td>aaa</td>
		<td>bbb</td>
		<td class="noneLine">ccc</td>
	</tr>
</table>
</body>
</html>
  • id:tarchan
    http://w3g.jp/xhtml/dic/colgroup

    colgropupを使ってカラムの設定をすると、もっと簡単になりますよ。
  • id:Mars
    colgropupは現時点では実装状況に問題が多くて使いづらいのが正直なところです。
    http://cssbug.at.infoseek.co.jp/misc/col.html
    これが安心して使えるようになると確かにスッキリできるんですけどね。
  • id:TOMOSUMA
    ファイヤーフォックスだと表示が崩れるので display none の方が良いかもです。
    TABLE.rows[i].cells[CELL.cellIndex].style.display = (obj.checked)?'none':'';

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません