• ベストアンサー
  • 困ってます

テーブルのある列を非表示にする方法

  • 質問No.5622239
  • 閲覧数2993
  • ありがとう数3
  • 回答数2

お礼率 5% (10/190)

非表示でなく削除でもいいんですが
テーブル列を非表示にする方法はありますか?

javascriptによって生成しない条件をつければいいと思うんですが
表自体がすでにjavascriptで生成されていてるので、ごちゃごちゃになりそうなのと
表も結構量があるので、処理が重くなってしまいそうです(今のところ考えつく方法では)

消したい物をすべてまとめて同じID的な物を振って置いて
そのIDを指定してdisplay:noneのようなスマートな非表示方法があれば、と思って探してます

classはデータセルごとにjavascriptで条件を見てつけています

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 61% (1594/2576)

ご提示の表だと、セルの結合などは行なっていないみたいなので、もしそうならば、わざわざidやクラスを設定しなくても、単純にループをまわすだけでよいのでは?


以下サンプル(入力値のチェックの方に手間がかかってるくらい)

*1/3/5 と入力すれば1、3、5列が非表示になる。(0列始まり)
*表示させる場合は、1/2,ture みたいな感じ。
*<th>などは考慮してないけれど、そのへんはよしなに。

<html>
<head><title>test</title>
<script type="text/javascript">
function test() {
var arg = document.getElementById('inp').value.split(',');
if (!arg[0]) return;
arg[1] = arg[1] || false;
var c = [], i, tmp = arg[0].split('/');
for (i=0; i<tmp.length; i++) if (!isNaN(tmp[i])) c.push(tmp[i]);
column (document.getElementById('tbl0'), c, arg[1]);

function column(t, c, f) {
var i=0, j, r, td, tr = t.getElementsByTagName('TR');
while (r = tr[i++]) {
td = r.getElementsByTagName('TD');
for (j=0; n=c[j++];) if (td[n]) td[n].style.display = f?'inline':'none';
}
}
}
</script>
</head>

<body>
<table border="1" id="tbl0">
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
<td>1-5</td><td>1-6</td><td>1-7</td><td>1-8</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
<td>2-5</td><td>2-6</td><td>2-7</td><td>2-8</td>
</tr>
<tr>
<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
<td>3-5</td><td>3-6</td><td>3-7</td><td>3-8</td>
</tr>
<tr>
<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td>
<td>4-5</td><td>4-6</td><td>4-7</td><td>4-8</td>
</tr>
<tr>
<td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td>
<td>5-5</td><td>5-6</td><td>5-7</td><td>5-8</td>
</tr>
</table>
<hr>
行番号(複数行の場合「/」区切り), boolean(true:表示,false:非表示(省略可)<br>
<input type="text" id="inp" value="">
<input type="button" value="実行" onclick="test()">
</body>
</html>

*rowとかcellも使えるみたいなので、そのほうが考えやすいかも。
http://f32.aaa.livedoor.jp/%7Eazusa/index.php?t=js&p=rowobject
お礼コメント
mania11

お礼率 5% (10/190)

表の場所を指定する方法もあったんですね
参考URLが参考になりました

ソースの方も使ってみたいと思います
ありがとうございます
投稿日時:2010/01/26 01:38

その他の回答 (全1件)

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ