<table border="0" id="tbl1">
<tr>
<th>A1</td>
<th>B1</td>
<th colspan="2">C1</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>
というテーブルで、C1列(要はデータcccとdddの2列)を表示/非表示を行いたいです。
調べてみたところ、colspanが設定されている例がありませんでした。
お判りになる方、よろしくお願いします。
No.11ベストアンサー
- 回答日時:
rowSpan が、からむとてーぶるのてんかいが、ちょうめんどう!
いじでも といてやろうと かんがえたあげく、こんなのが・・・
上級者の方の解法をお願いします。
<button onClick="test('tbl1','list1')">隠す</button>
<table border="1" cellpadding="2" cellspacing="1" id="tbl1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" id="list1">BBB</th>
</tr>
<tr>
<th width="120">BBB1</th>
<th width="120">BBB2</th>
<th width="120">BBB3</th>
</tr>
<tr>
<th>BBB11</th>
<th>BBB21</th>
<th>BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
</tr>
</table>
<script type="text/javascript">
<!--
function test(tableID, targetID) {
var tr = document.getElementById(tableID).rows;
var eTgt = document.getElementById(targetID);
var x1 = eTgt.offsetLeft;
var x2 = x1 + eTgt.offsetWidth;
var d = [];
var o1, o2;
var c1 = 0, c2, c3 = 0;
while (o1 = tr[c1++]) {
c2 = 0;
while (o2 = o1.cells[c2++])
if (x1 <= o2.offsetLeft && o2.offsetLeft < x2) d.push(o2);
}
while (o1 = d[c3++]) o1.style.display = 'none';
}
//-->
</script>
No.8
- 回答日時:
おおきいゆめをかたられたら、どうしよう?とおもったけど。
ばぶ。function hide() {
var c = 0, o, e;
while (o = arguments[c++]) (e = document.getElementById(o)) && (e.style.visibility = 'hidden');
}
No.7
- 回答日時:
ぶちっ。
れいせいに×2>じぶん
ikeike77さんへ
ようぼうというか、仕様はほかにないのかなぁ~。ばぶぅ~
ゆめはおおきくかたっておいたほうがよいぞ!ばぶぅ。
この回答への補足
ごめんなさいm(__)m
回答No.3に補足説明したのですが、rowspan、colspan混在したテーブルで、
childNodesとかの知識もおぼろげで。。。
要はテーブル中の特定のIDを付けた列だけを非表示にしたいのです。
No.6
- 回答日時:
babu_babooさんの方法が一番スマートですね。
tableの場合、childNodesを使わなくても rows, cells という便利なプロパティがあるようです。
Document Object Model/TABLE
http://homepage3.nifty.com/aya_js/dom/dom03.htm
# あとは、Firebugでいろいろコードをたたけば解決できるんじゃないでしょうか。
No.5
- 回答日時:
れんとう、ごめん。
colSpan には、0のときもあるらしいので、そのときは・・・
やっぱり while がみじかいじょ
function test(tableID, sRow, eRow, vFlag) {
var t = document.getElementById(tableID);
var tr;
var cIdx;
var obj;
var disp = /*@if(@v<8) 'inline' @else@*/ 'table-cell' /*@end@*/;
var i = 0, j;
while (tr = t.rows[i++]) {
cIdx = j = 0;
while (obj = tr.cells[j++]) {
sRow <= cIdx && cIdx <= eRow && (obj.style.display = vFlag ? disp: 'none');
cIdx += obj.colSpan;
}
}
}
No.3
- 回答日時:
ひょうのせるには、.colSpanってのがあるじょ!
それをかうんとしてはんだんしてる。
style.display は、tabel-cell と inline とがあるじょ
めんどうなので rowSpan は、する~しちゃった
ばぶぅ。
//@cc_on @set @v = @_jscript_version;
function test(tableID, sRow, eRow, vFlag) {
var t = document.getElementById(tableID);
var rMax = t.rows.length;
var cMax;
var tr;
var cIdx;
var obj;
var disp = /*@if(@v>=8) 'inline' @else@*/ 'table-cell' /*@end@*/;
for (var i = 0; i < rMax; i++) {
tr = t.rows[i];
cMax = tr.cells.length;
cIdx = 0;
for (var j = 0; j < cMax; j++) {
obj = tr.cells[j];
if (sRow <= cIdx && cIdx <= eRow) {
obj.style.display = vFlag ? disp: 'none';
}
cIdx += obj.colSpan;
}
}
}
alert('消す');
test('tbl1', 2,3);
alert('見せる');
test('tbl1', 2,3,true);
この回答への補足
申し訳ありません。皆様を混乱させてしまって・・・
やりたい事は、AAAの列だけ常に表示させておき、BBB(つまり3列分)を表示/非表示になる・・といった事です。
下のHTMLで、変数bbbには「3」が入っているのは確認できましたが、後がさっぱり続きません。
どうぞよろしくお願いいたします。
<html>
<head>
<script type="text/javascript">
<!--
function hide(idName) {
var aaa = document.getElementById(idName).childNodes;
var bbb = aaa[0].length;
alert(bbb);
//-->
</script>
</head>
<body>
<button onClick="hide('list1')">隠す</button>
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" id="list1">BBB</th>
</tr>
<tr>
<th width="120">BBB1</th>
<th width="120">BBB2</th>
<th width="120">BBB3</th>
</tr>
<tr>
<th>BBB11</th>
<th>BBB21</th>
<th>BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
</tr>
</table>
</body>
</html>
No.2
- 回答日時:
document.getElementById('tbl1').childNodes
を取得して、childNodesを辿っていって3番目&4番目のtd要素ノードにstyle="display:none;"を与える。
という形になると思います。
TAG indexによく似た質問がありました。参考になるかもしれません。
掲示板/JavaScript質問板/javascript 列を非表示にしたい - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi? …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Perl PERL 1 2022/04/26 14:15
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
Excelで作ったhtmlファイルのサ...
-
tableの任意行にfocusをあてる
-
jqueryで表に連番No.を追加したい
-
クリックされた罫表セルの行番...
-
プルダウンで選択すると、DBの...
-
[Javascript]セル内の文字列の...
-
jspでのArrayListの値の表示
-
JavaScriptでテーブルの行入れ替え
-
TRタグの入れ子におけるchildNo...
-
かなりなお願い!!野球部のス...
-
【JQuery】テーブルで行選択さ...
-
標準準拠モードと後方互換モー...
-
特定<table>内の<td>の色を変える
-
カレンダーの年月日の横に翌月...
-
callback関数が起動しない
-
Jquery on click 発火しない
-
スクロールバーの表示位置を変...
-
JavaScript 保守性の高いコード...
-
ウイルスバスターオンラインス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
JavaScriptでテーブルをクリッ...
-
【UWSC】HTML内のある部分を抽...
-
至急!GetElementById でtdの...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
動的なtableの値を取得したい
-
Selenium.ChromeDriverの使い方...
-
二次元配列に数字をランダムに...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
テーブルの変数について
-
マウスをブラウザの外に出した...
-
テーブル行のクリックでチェッ...
-
jquery datatablesを使用 イン...
おすすめ情報