ネットが遅くてイライラしてない!?

javascriptで特定のclassを表示、非表示にする方法を検討中なのですが、
a,b,cと三つのボタンが有り、abcというclassがあります。
aをクリックするとb,cが非表示になり、aが表示される
bをクリックするとa,cが非表示になり、bが表示される
cをクリックするとa,bが非表示になり、cが表示される
と言う動作をさせたいのですが、上手くいきません。
どなたかご教授ください。
お願いいたします。

<script type="text/javascript">
<!--
function change(site){
 if(!document.getElementsByTagName){return;}
 var e = new Array('a','b','c');
 var objs = document.getElementsByTagName('*');
 for(i=0;i<e.length;i++){
  if(e[i] != site){
   for(y=0;y<objs.length;y++){
    if(objs[y].className == e[i]){
     objs[y].style.display = 'none';
    }else{
     objs[y].style.display = '';
    }
   }
  }
 }
}
// -->
</script>

<table cellspacing="10">
<tr>
<th>テスト</th>
<td>
<input type="text" name="" id="" class="a" value="" />
<input type="text" name="" id="" class="b" value="" />
</td>
</tr>
<tr>
<th>test</th>
<td>
<input type="text" name="" id="" class="c" value="" />
</td>
</tr>
</table>
<a href="javascript:change('a')">a</a>
<a href="javascript:change('b')">b</a>
<a href="javascript:change('c')">c</a>

このQ&Aに関連する最新のQ&A

A 回答 (8件)

短時間でまとめたので、ほとんど何も考えていません。

他にもたくさんやり方がありますが、とりあえずシンプルを目指して書きました。

var cname = new Array();
cname["a"] = new Object("a" == site ? "block": "none");
cname["b"] = new Object("b" == site ? "block": "none");
cname["c"] = new Object("c" == site ? "block": "none");

//cname["a"] = new Object("a" == site ? "visible": "hidden");
//cname["b"] = new Object("b" == site ? "visible": "hidden");
//cname["c"] = new Object("c" == site ? "visible": "hidden");

var objs = document.getElementsByTagName('*');

for(var y=0;y<objs.length;y++){
if(cname[(objs[y].className)] != undefined){
objs[y].style.display = cname[(objs[y].className)] ;
// objs[y].style.visibility = cname[(objs[y].className)] ;
}

不特定多数のオブジェクトをClassNameで判断して処理するやり方は、意図する事はわからないでもないですが、現実的ではありませんね。確かにこれだと、後から変更しなくても、オブジェクトを増やしてゆくだけでいいのですが、オブジェクト型DBとかECサイトなど、リストが多いものに関しては、パフォーマンスが悪くなり、あまりお勧めできるやり方ではないですね。

change()に対象となるIDの配列(又はHTMLオブジェクト)を渡して、処理するほうが、パフォーマンス的にも、コード的にも、早くシンプルに書けます。

今回のコードのポイントは、Display=block とした場合、"" ではなく、none を指定しないとだめですね。

それと、”if(e[i] != site){” だと、表示対象のオブジェクトで、現在非表示の場合は表示処理をしないとだめですね。コード的に間違いはそこです。

後、CSS的にはBlockだとフォーマットが変更されてしまいます。それを意図したならいいですが、"visible"で表示だけを消してもいいのかな、と思います。

JavaScript1.2 レベルであれば、change()に渡す時に、("block", "none", "none")で渡して、change(a,b, c)にすればいいわけです。そうなんです、渡す時にもっと確定した情報を渡せばいいわけです(配列で渡してもいいですね)。
    • good
    • 0
この回答へのお礼

とてもわかりやすいご説明ありがとうございます。
おかげで問題が解決いたしました。
ちなみに他にもたくさんやり方とか教えていただけると
幸いです。
どうぞ宜しくお願いいたします。

お礼日時:2010/03/22 14:26

#7のていせい。

ごめん。
var change = (function ( ) {

 var classA = document.getElementsByClassName( 'a' );
 var classB = document.getElementsByClassName( 'b' );
 var classC = document.getElementsByClassName( 'c' );
 
 return (function ( setter ) {
  return function ( s, css ) {

   if( 'undefined' == typeof css )
    css = 'inline';

   Array.map( classA, setter( s == 'a' ? css: 'none' ) );
   Array.map( classB, setter( s == 'b' ? css: 'none' ) );
   Array.map( classC, setter( s == 'c' ? css: 'none' ) );
  };
 })(
  function ( css ) {
   return function ( e ) { e.style.display = css; };
  })
})();
    • good
    • 0

くらすがこていなら、こっちがすこしはやいかなぁ~?


var change = (function ( ) {

 var classA = document.getElementsByClassName( 'a' );
 var classB = document.getElementsByClassName( 'b' );
 var classC = document.getElementsByClassName( 'c' );
 
 return (function ( setter ) {
  return function ( s, css ) {

   if( 'undefined' == typeof css )
    css = 'inline';

   Array.map( classA, setter( s == 'a' ? css, 'none' ) );
   Array.map( classB, setter( s == 'b' ? css, 'none' ) );
   Array.map( classC, setter( s == 'c' ? css, 'none' ) );
  };
 })(
  function ( css ) {
   return function ( e ) { e.style.display = css; };
  });
})();
    • good
    • 0

ていせい。


var change = (function ( ) {

 var setter = function ( css ) {
  return function ( e ) { e.style.display = css; };
 };

 var none = setter( 'none' );

 return function ( s, css ) {
  var disp = setter( 'undefined' !== typeof css ? css: 'inline' );
  var func;

  func = s == 'a' ? disp: none;
  Array.map( document.getElementsByClassName( 'a' ), func );

  func = s == 'b' ? disp: none;
  Array.map( document.getElementsByClassName( 'b' ), func );

  func = s == 'c' ? disp: none;
  Array.map( document.getElementsByClassName( 'c' ), func );
 };
})();
    • good
    • 0

なしのつぶてだが、こういうのはどう?うごかないぶらうざもあるけど。




var change = (function ( ) {

 var setter = function ( css ) {
  return function ( e ) { e.style.display = css; };
 };

 var none = setter( 'none' );

 return function ( s, css ) {
  var disp = setter( 'undefined' !== typeof css ? css: 'inline' );

  Array.map( document.getElementsByClassName( 'a' ), s == 'a' ? disp: none );
  Array.map( document.getElementsByClassName( 'b' ), s == 'b' ? disp: none );
  Array.map( document.getElementsByClassName( 'c' ), s == 'c' ? disp: none );
 };
})();
    • good
    • 0

element.style.display = '';


は、おかしい(そうだ)。


document.getElementsByClassName
をつかうとか

element.style.className = "a b d";
みたいにふくすうできるのだから、それもかんがえようよ。
    • good
    • 0

クラス名が設定されていない要素は表示のままでいいのですよね?



パフォーマンスなどについては他の方のご意見に賛成。しっかりした回答もあるみたいなので、少々いい加減なものを…

>ちなみに他にもたくさんやり方とか教えていただけると~
ということなので、ご質問文にほぼ近い方法で。

function change(site){
if(!document.getElementsByTagName) return;
var i=0, e, objs = document.getElementsByTagName('*');
while (e = objs[i++]) e.style.display = (!e.className || site==e.className)?'':'none';
}

実用的に考えると、クラスの設定がこのためだけにされているとは思いにくいし、仮にそうだとしても、2つのクラスを同時に表示しておきたいとかいろいろありそうな気もする。
    • good
    • 0

こんなのはだめ?


onloadのあとに。
ぜんかくくうはくは、はんかくにしてね。

var change = (function ( contains, display ) {

 var tags = document.getElementsByTagName( '*' );
 var classA = [ ];
 var classB = [ ];
 var classC = [ ];
 var cnt = 0, element;
 
 while( element = tags[ cnt++ ] ) {
  contains( element, 'a' ) && classA.push( element );
  contains( element, 'b' ) && classB.push( element );
  contains( element, 'c' ) && classC.push( element );
 }
 
 return function ( sw, tp ) {
  var c = 0;
  var o;
  if( 'undefined' === typeof tp )
   tp = 'inline';
  
  display( classA, 'a' === sw ? tp: 'none' );
  display( classB, 'b' === sw ? tp: 'none' );
  display( classC, 'c' === sw ? tp: 'none' );
 };
})(
  (function ( cut, has ) {
   return function ( e, name ) {
    if( !has( e.className, name ) ) {
     var keys = cut( name );
     var cnt = 0, key;
     
     while( key = keys[ cnt++ ] )
      if( !has( e.className, key ) )
       return false;
    }
    return true;
   };
  })(
    function (s) { return ('' + s).split( /\u0020+/ ); },
    function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); }
   ),

  function ( ary, css ) {
   for( var cnt = 0, e; e = ary[ cnt++ ]; e.style.display = css );
  }
 )
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q特定の条件のHTML要素を一括で表示・非表示

お世話になっております。

javascript、または何らかの方法で、特定の条件にあうHTML要素のCSSプロパティを一括で書き換える方法を探しております。
Dreamweaverを使っているのでビヘイビアでできないか試してみましたが、ID単位で要素を扱うので複数のレイヤーを同時に表示・非表示することはできないようでした。


以下、やりたいことの一例です。下記のように、ボタンを押すとその条件に合わないclassの要素を「display:none」状態したいと考えています。

------------------------------------------------------------------
[イヌ表示ボタン]  [ネコ表示ボタン] [両方表示ボタン]

<div class="dog">ダルメシアン</div>
<div class="cat">ロシアンブルー</div>
<div class="dog">柴犬</div>
<div class="dog">チワワ</div>
<div class="cat">シャム</div>
<div class="cat">ヒマラヤン</div>
<div class="cat"アビシニアン</div>
<div class="dog">ゴールデンレトリーバー</dog>

イヌ表示ボタンを押したときは、class="cat"がdisplay:noneになり、
のブラウザ上では犬だけがピックアップ表示される。


<div class="dog">ダルメシアン</div>
<div class="dog">柴犬</div>
<div class="dog">チワワ</div>
<div class="dog">ゴールデンレトリーバー</dog>
------------------------------------------------------------------
実際にはボタンで操作するだけではなく、たとえば犬ページ、ネコページを同じコンテンツに更新し、ロードイベントだけ異なった記述をするだけで、それぞれのページに適切なコンテンツのみ表示をさせたりしたいと考えております。

恐れ入りますが、何卒、よろしくお願い致します。

お世話になっております。

javascript、または何らかの方法で、特定の条件にあうHTML要素のCSSプロパティを一括で書き換える方法を探しております。
Dreamweaverを使っているのでビヘイビアでできないか試してみましたが、ID単位で要素を扱うので複数のレイヤーを同時に表示・非表示することはできないようでした。


以下、やりたいことの一例です。下記のように、ボタンを押すとその条件に合わないclassの要素を「display:none」状態したいと考えています。

------------------------------------------------...続きを読む

Aベストアンサー

『指定範囲内のdiv要素について、チェックして(表示/非表示)する』みたいなことでよいのでは?

class指定のないdivは常に(非表示/表示)とするのか、両方あると思いますがこんなのではどうでしょうか?
* load時は対象を指定して fuga() を実行するようなことでよいかと…
(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
<!--
function hoge(evt){
 var t = evt.target || evt.srcElement;
 if(t.nodeName=="BUTTON")
  fuga(t.getAttribute("name"));
}

function fuga(str){
 var div = document.getElementById("item_list").getElementsByTagName("div");
 for(var i=0, d; d=div[i++];)
  if(d.className){
   var reg = new RegExp("(^|:)" + d.className + "(:|$)");
   d.style.display = reg.test(str)?"block":"none";
  }
}
//-->
</script>
</head>

<body>

<div onclick="hoge(event)">
<button type="button" name="dog">犬表示</button>
<button type="button" name="cat">猫表示</button>
<button type="button" name="dog:cat">犬猫表示</button>
</div>

<div id="item_list">
<div class="dog">ダルメシアン</div>
<div class="cat">ロシアンブルー</div>
<div class="dog">柴犬</div>
<div class="dog">チワワ</div>
<div class="cat">シャム</div>
<div class="cat">ヒマラヤン</div>
<div class="cat">アビシニアン</div>
<div class="dog">ゴールデンレトリーバー</div>
<div>クラス指定のない要素</div>
</div>

</body>
</html>

『指定範囲内のdiv要素について、チェックして(表示/非表示)する』みたいなことでよいのでは?

class指定のないdivは常に(非表示/表示)とするのか、両方あると思いますがこんなのではどうでしょうか?
* load時は対象を指定して fuga() を実行するようなことでよいかと…
(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" conten...続きを読む

Q表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか?

複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。
最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか?

●例えば、test1を押した際、test2と3は非表示としたいです。

<script language="JavaScript" type="text/JavaScript">
<!--
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow);
obj.style.display = "block";
obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden);
obj.style.display = "none";
}
//-->
</script>

<a href="javascript:ChDsp2('text1','text2');">1を表示</a>
<a href="javascript:ChDsp2('text2','text1');">2を表示</a>
<a href="javascript:ChDsp2('text3','text1');">3を表示</a>


<span id="text1" style="display:block;">111111</span>
<span id="text2" style="display:none;">222222</span>
<span id="text3" style="display:none;">333333</span>


どなたか教えてください。お願いします。

複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。
最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか?

●例えば、test1を押した際、test2と3は非表示としたいです。

<script language="JavaScript" type="text/JavaScript">
<!--
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && ...続きを読む

Aベストアンサー

きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ?

<style>
.hide{display:none;}
.r{ background-Color:red;}
.g{ background-Color:green;}
.b{ background-Color:blue;}
</style>
<script>
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,"");
if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide';
}
}
return false;
}
</script>

<a href="#" onclick="return ChDsp2('text1','textALL');">1を表示</a>
<a href="#" onclick="return ChDsp2('text2','textALL');">2を表示</a>
<a href="#" onclick="return ChDsp2('text3','textALL');">3を表示</a>


<div id="text1" class="textALL r">111111</div>
<div id="text2" class="textALL g hide">222222</div>
<div id="text3" class="textALL b hide">333333</div>

きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ?

<style>
.hide{display:none;}
.r{ background-Color:red;}
.g{ background-Color:green;}
.b{ background-Color:blue;}
</style>
<script>
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hid...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

QJavascriptでページ内の任意クラスを非表示

Javascriptで、ページ内に点在する任意のクラスを非表示にしたいと思います。
こんなことが可能でしょうか?

条件:
1.class="text"というspanなりdivなりがページ内に複数存在します。指定しているスタイルはフォントサイズやフォントカラーです。

2.そのクラスが指定された要素の中で、テキストで「非表示」となっている要素のみ非表示にしたいと思います。
 例:<span class="text">非表示にしたい</span>、<div class="text">これは非表示です</div>
 このように「非表示」という文字が含まれています。

3.「非表示」というテキストが含まれている要素にはclass="text"以外にclassもidもふられていないです。

4.jQueryやJavascriptは使えますが、あらかじめ指定要素にidやclassを付加しておくということができません。何らかの方法でページ読み込み後に検索し、探し出さないといけないのです。


案:
素人の私が考えた方法では、「非表示」という文字がマッチする「class="text"」要素を何らかの方法で検索し、その要素に対して「id="hide"」などを追加して、そのidを非表示処理するという方法です。

上記案をコード化できますか?
また、ほかにもっと簡潔にできるよという方法はありますか?

かなりの無理難題のような気がしますが、もしできるようであればよろしくお願いします。

Javascriptで、ページ内に点在する任意のクラスを非表示にしたいと思います。
こんなことが可能でしょうか?

条件:
1.class="text"というspanなりdivなりがページ内に複数存在します。指定しているスタイルはフォントサイズやフォントカラーです。

2.そのクラスが指定された要素の中で、テキストで「非表示」となっている要素のみ非表示にしたいと思います。
 例:<span class="text">非表示にしたい</span>、<div class="text">これは非表示です</div>
 このように「非表示」という文字が含まれています...続きを読む

Aベストアンサー

>そのクラスが指定された要素の中で~~
が、どこまでの範囲を指しているのかわかりませんがご参考までのネタとして。
(あとは適当に作り直してください。インデントは全角空白になっています)

(function(){
 var f = window.onload;
 window.onload = function(){
  if(f) f();
  var i, e, t, n, elms = document.body.getElementsByTagName("*");
  for(i=0; e=elms[i++];){
   if((n=e.className) && n.match(/\btext\b/))
    if((((t=e.textContent) || t!==undefined)?t:e.innerText).indexOf("非表示")>-1)
     e.style.display = "none";
  }
 }
})();


* これ(↑)だと
 <a href="~" class="text">非<span>表示</span>~~
なんてのは対象になるけれど
 <a href="~" class="text">非
 <span>表示</span>~~
だと対象にならないとかになるけれど、どんなのが良いのかわからないので意図に応じてご修正を。
(多分、jQueryで書けばもっと簡略になることでしょう)

>そのクラスが指定された要素の中で~~
が、どこまでの範囲を指しているのかわかりませんがご参考までのネタとして。
(あとは適当に作り直してください。インデントは全角空白になっています)

(function(){
 var f = window.onload;
 window.onload = function(){
  if(f) f();
  var i, e, t, n, elms = document.body.getElementsByTagName("*");
  for(i=0; e=elms[i++];){
   if((n=e.className) && n.match(/\btext\b/))
    if((((t=e.textContent) || t!==undefined)?t:e.innerText).i...続きを読む

Q