人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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だと、見出しの「ううう」のセルは表示・非表示ができるのですが、その下の行は表示されます。
どういう風にしたら行の部分も非表示に出来るのでしょうか?

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:AAA CCC JavaScript PHP いもの
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● KUROX
●10ポイント

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

タグにこのidをつける。


2 ● Mars
●100ポイント

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

// 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);">

//テーブルはそのまま。
<||
◎質問者からの返答

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


3 ● ketil
●10ポイント

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

一番上だけ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>が入るのは仕様でしょうか?

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


4 ● bloodalone
●10ポイント

質問のソースのままならば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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ