- 締切済み
複数の場所（tableの中のｔｄ）の色を変更する
いつもお世話になっています。 以前こちらで質問させて頂き、途中までは解決したのですが （ありがとうございました）、また新たに問題が発生してしまいましたので・・・どなたか助けて下さい（応用がどうしてもできないので ・・・行き詰まってしまいました＞＜） やりたいことはテーブルの各行の上をカーソルが通過すると その行の色が変わる（通過しおわると元の色に戻る）という プログラムをつくりたいのです。。 しかし問題は、一行そのまま色が変わるというのではないことです。 下にソースがありますが、カーソルが『りんご』上にあるときは 『くだもの１』『くだもの２』のセルも一緒に色を変える、また、 『みかん』でも『バナナ』でもカーソルが上を通過してるときは 『くだもの１』『くだもの２』のセルを一緒に色を変える・・・というようにしたいのです（『なす』や『豚肉』達も同じです） 今できているソースだと『みかん』『バナナ』『メロン』のどれも 『くだもの１』しか色が変更されません。 どうすれば『くだもの２』も一緒に色変更されるのでしょうか？ わかりずらい内容でしたらすみません（＞＜） お手数おかけしますがどうかよろしくお願い致します。 ソースは以下になります（前回教えていただいた方のソースを そのまま使用していますm(_ _)m） ※違うプログラムの組み方でも大丈夫です。 <style> .fruit{ background-Color:blue; } .vegetable{ background-Color:green; } .cereal{ background-Color:yellow; } .onmouse{ background-Color:red; color:white; text-decoration:blink; font-weight:bold; } </style> <script Language="JavaScript"> <!-- window.onload=function(){ var trs=document.getElementsByTagName("tr"); var thisClass=""; var classNames=new Array(); for(var i in trs){ if(trs[i].className) classNames[trs[i].className]=true; trs[i].onmouseover=function(){ thisClass=this.className; this.className=this.className+(this.className.indexOf(" onmouse")==-1?" onmouse":""); document.getElementById(thisClass).className="onmouse"; } trs[i].onmouseout=function(){ this.className=this.className.replace(" onmouse",""); document.getElementById(thisClass).className=""; } } for(var j in classNames){ document.getElementById(j).onmouseover=function(){ for(var i in trs){ if(this.id==trs[i].className){ trs[i].className=trs[i].className+(trs[i].className.indexOf(" onmouse")==-1?" onmouse":""); } } } document.getElementById(j).onmouseout=function(){ for(var i in trs){ if(trs[i].className) if(trs[i].className.indexOf(" onmouse")>0){ trs[i].className=trs[i].className.replace(" onmouse",""); } } } } } // --> </script> <body> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr class="fruit"> <td rowspan="4" id="fruit">くだもの1</td> <td rowspan="4" id="fruit">くだもの2</td> <td>りんご</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>みかん</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>メロン</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td rowspan="2" id="vegetable">野菜1</td> <td rowspan="2" id="vegetable">野菜2</td> <td>なす</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td>とまと</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td rowspan="3" id="cereal">肉1</td> <td rowspan="3" id="cereal">肉2</td> <td>豚肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>鶏肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>牛肉</td> <td> </td> <td> </td> </tr> </table> </body> </html> どうぞよろしくお願い致します。
- yu-tan2828
- お礼率69% (9/13)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- OKbokuzyo
- ベストアンサー率43% (130/296)
＃１，４，５です。 たびたび、申し訳ない。 ＃５の投稿で （※このときプロパティclassnmの値は先で定義したcssのセレクタ名称と同じにすること） とありますが、間違いです。忘れてください。 ＃４の投稿のときに少し触れましたが、 必要なのはclassnmの値とtdタグのname属性値が同じになっていれば それに該当するセルが、addMouseOverEventの引数で与えたcssの定義を反映するようになります。
- OKbokuzyo
- ベストアンサー率43% (130/296)
＃１、４です。 一個言い忘れた。 さらに定義を増やしたい場合。 つまり、現状では「くだもの」「野菜」「肉」の３つだけだが、 これにさらに四つ目の「きのこ」を増やしたくなった場合は、 １．<style>タグ内にセレクタを増やす 例）.kinoko{ background-Color:gray; } ２．JavaScriptに新たなクラスを作り、clsFoodを継承する。 例） var clsKinoko = function(){ //clsFoodを継承 clsFood.call(this); this.classnm = "kinoko"; }; （※このときプロパティclassnmの値は先で定義したcssのセレクタ名称と同じにすること） ３．html内に新たに行を追加。 例） ‥ ‥ <tr> <td rowspan="4" name="kinoko">きのこ1</td> <td rowspan="4" name="kinoko">きのこ2</td> <td>まつたけ</td> <td> </td> <td> </td> </tr> <tr> <td>まいたけ</td> <td> </td> <td> </td> </tr> <tr> <td>しいたけ（？）</td> <td> </td> <td> </td> </tr> ４．最後のscriptタグ内にclsKinokoのインスタンスを生成し、 addMouseOverEventメソッドを呼び出す。 var kinokoObj = new clsKinoko(); kinokoObj.addMouseOverEvent("kinoko"); １～４まですべて他と同じようにすればいいだけなので、 さほど問題は無いかとおもいます。
- OKbokuzyo
- ベストアンサー率43% (130/296)
#1です。 ヒマだったので自分も作ってみた。 簡単なやり方だったらいくらでもやりようはあるし、 すでにいろんな人が回答しているので、 敢えてちょっと難しめに、汎用性を考慮して作ってみた。 <html> <title>タイトルなし</title> <style type="text/css"> .fruit{ background-Color:blue; } .vegetable{ background-Color:green; } .cereal{ background-Color:yellow; } .onmouse{ background-Color:red; color:white; text-decoration:blink; font-weight:bold; } </style> <body> <script language=JavaScript type="text/javascript"> //すべてのスーパークラス（汎用的なメソッドを記載） var clsSuper = function(){ //name属性値からノードリストを返すメソッド(※IEではgetElementsByNameが使えないため) this.getElementsByNameAttr = function(strNameAttr){ var temp; var i; var arr = []; if(!!document.all){ for(i=0;i<document.all.length;i++){ temp = document.all.item(i); if(temp.name == strNameAttr){ arr.push(temp); } } return arr; } else{ for(i=0;i<document.getElementsByTagName("*").length;i++){ temp = document.getElementsByTagName("*").item(i); if(temp.name == strNameAttr){ arr.push(temp); } } return arr; } }; }; //clsFruit, clsVege, clsCerealの親クラス var clsFood = function(){ //clsSuperを継承 clsSuper.call(this); //addMouseOverEventメソッド使用時に対象とするテーブルのname属性に必要な名前を定義 var targetTableName = "targetTable"; //追加するonmouseoverイベントハンドラの定義 var MouseOverEvent = function(){ var Nodes; var i; var obj = new clsSuper(); var tmpAttr = this.getAttribute("classnm"); Nodes = obj.getElementsByNameAttr(tmpAttr); tmpAttr = this.getAttribute("onMouse"); for(i=0;i<Nodes.length;i++){ Nodes[i].className = tmpAttr; } }; //追加するonmouseoutイベントハンドラの定義 var MouseOutEvent = function(){ var Nodes; var i; var obj = new clsSuper(); var tmpAttr = this.getAttribute("classnm"); Nodes = obj.getElementsByNameAttr(tmpAttr); tmpAttr = this.getAttribute("offMouse"); for(i=0;i<Nodes.length;i++){ Nodes[i].className = tmpAttr; } }; //マウスのin, out時のイベントハンドラを追加するメソッド this.addMouseOverEvent = function(onmouseColor,noName){ if(noName !== false && noName !== true){ noName = true; } var tableNodes; var TableNode; var trNodes; var trNode; var trChildNodes; var tdNode; var i; var j; var k; var spanNum; tableNodes = document.getElementsByTagName("table"); for(i=0;i<tableNodes.length;i++){ TableNode = tableNodes.item(i); if(TableNode.name == targetTableName){ trNodes = TableNode.getElementsByTagName("tr"); spanNum = 0; for(j=0;j<trNodes.length;j++){ trNode = trNodes.item(j); trChildNodes = trNode.childNodes; for(k=0;k<trChildNodes.length;k++){ tdNode = trChildNodes.item(k); if(tdNode.name == this.classnm){ spanNum = tdNode.getAttribute("rowspan"); } if(spanNum > 0){ if(noName === false){ if(tdNode.name !== this.classnm && tdNode.name !== undefined){ tdNode.setAttribute("classnm", this.classnm); tdNode.setAttribute("offMouse", tdNode.className); tdNode.setAttribute("onMouse", onmouseColor); tdNode.onmouseover = MouseOverEvent; tdNode.onmouseout = MouseOutEvent; } }else{ if(tdNode.name !== this.classnm && tdNode.name === undefined){ tdNode.setAttribute("classnm", this.classnm); tdNode.setAttribute("offMouse", tdNode.className); tdNode.setAttribute("onMouse", onmouseColor); tdNode.onmouseover = MouseOverEvent; tdNode.onmouseout = MouseOutEvent; } } } } spanNum--; } } } }; }; var clsFruit = function(){ //clsFoodを継承 clsFood.call(this); this.classnm = "fruit"; }; var clsVege = function(){ //clsFoodを継承 clsFood.call(this); this.classnm = "vegetable"; }; var clsCereal = function(){ //clsFoodを継承 clsFood.call(this); this.classnm = "cereal"; }; </script> <table width="300" border="1" cellspacing="0" cellpadding="0" name="targetTable"> <tr> <td rowspan="4" name="fruit">くだもの1</td> <td rowspan="4" name="fruit">くだもの2</td> <td>りんご</td> <td> </td> <td> </td> </tr> <tr> <td>みかん</td> <td> </td> <td> </td> </tr> <tr> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr> <td>メロン</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="2" name="vegetable">野菜1</td> <td rowspan="2" name="vegetable">野菜2</td> <td>なす</td> <td> </td> <td> </td> </tr> <tr> <td>とまと</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="3" name="cereal">肉1</td> <td rowspan="3" name="cereal">肉2</td> <td>豚肉</td> <td> </td> <td> </td> </tr> <tr> <td>鶏肉</td> <td> </td> <td> </td> </tr> <tr> <td>牛肉</td> <td> </td> <td> </td> </tr> </table> <script language=JavaScript type="text/javascript"> var fruitObj = new clsFruit(); var vegetableObj = new clsVege(); var cerealObj = new clsCereal(); fruitObj.addMouseOverEvent("fruit"); vegetableObj.addMouseOverEvent("vegetable"); cerealObj.addMouseOverEvent("cereal"); </script> </body> </html> -------------------------------------------------------------- クラス定義をコードの上側scriptタグ内に持っていき、 実際に動作するコードは最後のscriptタグに置いてある。つまり、 var fruitObj = new clsFruit(); var vegetableObj = new clsVege(); var cerealObj = new clsCereal(); fruitObj.addMouseOverEvent("fruit"); vegetableObj.addMouseOverEvent("vegetable"); cerealObj.addMouseOverEvent("cereal"); 実際に動いているのはこれだけ。 addMouseOverEventメソッドの第一引数はスタイルシートのセレクタを取るので 例えば下記のようなcssを増やし、 .onmouse2{background-Color:gray;} これをフルーツの欄に同じように適用したい場合は fruitObj.addMouseOverEvent("onmouse2"); というように引数を変えるだけでおｋ。 さらに、例えば「りんご」の部分だけマウスが乗っかっても 色が変化しないようにしたい場合、下記のように色の変化をさせたくないtdタグにname属性を持たせる。(値はなんでもいい) ‥ <td name="namdemoyoi">りんご</td> ‥ 逆に、例えば「りんご」「なす」の部分にマウスが乗っかった場合だけ 色を変化させたい場合は、 下記のように色を変化させたくないtdタグにname属性を持たせ、 addMouseOverEventメソッドの第二引数にfalseと入れる。 ‥ <td name="namdemoyoi">りんご</td> ‥ ‥ <td name="namdemoyoi">なす</td> ‥ fruitObj.addMouseOverEvent("fruit",false); vegetableObj.addMouseOverEvent("vegetable",false); （※ 第二引数は省略するとtrueとしている） あと、極めつけは、テーブルの行を増やそうが、列を増やそうが、ちゃんと動く（はず）。 仕様として、この機能をテーブルに適用するにはtableタグのname属性に name="targetTable"と書かれている必要があるようにした。 例）<table name="targeTable"></table> また、変化させたいセルのname属性とcssのクラス属性に対するセレクタ名称は同じにしておく必要がある。（これは質問文に提示したコードもそうなっているようなのでそのようにした。） 具体的に何を言っているのかと「くだもの」を例にしていうと、 .fruit{background-Color:blue;} ^^^^^^←ココと <td rowspan="4" name="fruit">くだもの1</td> このname属性の値（例では"fruit"）は同じにする必要があるってこと。 あと、質問文のコードではclass属性をトリガーにしているめ、 各行に最初から色がついているようだが、 cssで定義しておきながら、class属性をトリガーにするのは どうかと思うので消しといた。 今回投稿したコードでも最初から色をつけておきたいのであれば、 同じようにtrタグのclass属性に"fruit"とか入れるのはかまわない。 （つまり、私の投稿したコードはclass属性をトリガーとしていない） 最後に１つだけ欠点。 クロスブラウザには気を張ってたつもりだったんだが、 いざテストしてみるとIEでしか動かなかった。 まぁ、そろそろめんどくさいしあくまで参考にってことで直さずぶっこんどいた。 javascriptでわざわざクラスの形で設計されているものは少ない（個人で作成する場合は特に）けれど、 最近流行りのAjax等のライブラリはすべて名前空間やクラス設計されているし、 個人とはいえ、作っていくうちにコードはそれなりに大きくなるから 最初からちゃんとクラス設計しておくと、後々見たときに整理されていて分かりやすいメリットがある。 「そんなの規模の大きいコードだけでやればいいじゃん」って言う人がいるけれど、 規模の小さいコードですら、きちんと設計できない人が、 いざ規模の大きいコードの設計をしようとしても絶対できない。 なんで、普段から意識してコードは整理しておくってのが私の持論。 今回はコードが見づらくなるため使用しなかったjavascriptの名前空間の作り方もぜひ一度学んでおいてもらいたいと思う。 （オブジェクトリテラルに放り込むだけなんで、大したことじゃないけど） 以上、参考にどぞ。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ゴチャゴチャっとしたのはちょっと前に出来てたんですけどすっきり出来ないかな～と思ってやってたら遅くなっちゃいました <style type="text/css"><!-- .fruit { background-color:blue; } .vegetable{ background-color:green; } .cereal{ background-color:yellow; } .onmouse{ background-color:red; color:white; } --></style> <script language="javascript"><!-- window.onload=function(){ var TRs = new Array(); TRs = document.getElementsByTagName('tr'); for(var i=0;i<TRs.length;i++) { TRs[i].onmouseover=function(){ preName = this.className; this.className = "onmouse"; document.getElementById(""+preName+"1").className = "onmouse"; document.getElementById(""+preName+"2").className = "onmouse"; } TRs[i].onmouseout=function(){ this.className = preName; document.getElementById(""+preName+"1").className = preName; document.getElementById(""+preName+"2").className = preName; } if(i == 0 || i == 5 || i == 8) { TRs[i].onmouseover=""; TRs[i].onmouseout=""; } } } //--></script> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr class="fruit"> <td rowspan="5" id="fruit1">くだもの1</td> <td rowspan="5" id="fruit2">くだもの2</td> </tr> <tr class="fruit"> <td>りんご</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>みかん</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr class="fruit"> <td>メロン</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td rowspan="3" id="vegetable1">野菜1</td> <td rowspan="3" id="vegetable2">野菜2</td> </tr> <tr class="vegetable"> <td>なす</td> <td> </td> <td> </td> </tr> <tr class="vegetable"> <td>とまと</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td rowspan="4" id="cereal1">肉1</td> <td rowspan="4" id="cereal2">肉2</td> </tr> <tr class="cereal"> <td>豚肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>鶏肉</td> <td> </td> <td> </td> </tr> <tr class="cereal"> <td>牛肉</td> <td> </td> <td> </td> </tr> </table> 文字数もあるので簡単に説明すると window.onload=function(){ ※画面表示したときに{ }内のアクションを動かす var TRs = new Array(); ※TRsという配列を設定 TRs = document.getElementsByTagName('tr'); ※<tr>というタグを認識 for(var i=0;i<TRs.length;i++) { ※<tr>の数だけ繰り返す TRs[i].onmouseover=function(){ オンマウスしたときのアクションの設定 preName = this.className; ※preNameにその<tr>のclassをいれる this.className = "onmouse"; ※<tr>のclassをonmouseに変更 document.getElementById(""+preName+"1").className = "onmouse"; ※id=●●1"のclassをonmouseに変更(フルーツだったらid=fruit1） document.getElementById(""+preName+"2").className = "onmouse"; ※id=●●2"のclassをonmouseに変更(id=fruit2) } TRs[i].onmouseout=function(){ ※onmouseoutしたときのアクションの設定 this.className = preName; ※<tr>のclassを元に戻す document.getElementById(""+preName+"1").className = preName; ※id=●●1"のclassを元に戻す document.getElementById(""+preName+"2").className = preName; ※id="●●2"のclassを元に戻す } if(i == 0 || i == 5 || i == 8) { ※アクションを起こさない<tr>の設定(ページ行頭から最初に出た<tr>が『0』個目となります） =>左2つのセルはonmouseしても変らないようにしてます TRs[i].onmouseover=""; TRs[i].onmouseout=""; } } } テーブルの限定をするのであればテーブルにidをつけて <table id="★★"> function内のTRs = document.getElementsByTagName('tr'); を TRs = document.getElementById("★★").document.getElementsByTafName('tr'); とすればおそらくできると思う p.s. ●●、★★は半角英数字で最初はアルファベットで開始
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <script language="javascript"><!-- function colorset(cl,colors) { obj = document.getElementsByTagName("td"); cName = cl.className; cl.style.backgroundColor = colors; for(i=0;i<obj.length;i++) { if(obj[i].className == cName+"1" || obj[i].className == cName+"2") { obj[i].style.backgroundColor = colors; } } } function coloroff() { obj = document.getElementsByTagName("td"); for(i=0;i<obj.length;i++) { obj[i].style.backgroundColor = "white"; } } //--></script> <table width="300" border="1" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4" class="fruit1">くだもの1</td> <td rowspan="4" class="fruit2">くだもの2</td> <td class="fruit" onMouseover="colorset(this,'red')" onMouseout="coloroff()">りんご</td> <td> </td> <td> </td> </tr> <tr> <td class="fruit" onMouseover="colorset(this,'red')" onMouseout="coloroff()">みかん</td> <td> </td> <td> </td> </tr> <tr> <td class="fruit" onMouseover="colorset(this,'red')" onMouseout="coloroff()">バナナ</td> <td> </td> <td> </td> </tr> <tr> <td class="fruit" onMouseover="colorset(this,'red')" onMouseout="coloroff()">メロン</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="2" class="vegetable1">野菜1</td> <td rowspan="2" class="vegetable2">野菜2</td> <td class="vegetable" onMouseover="colorset(this,'green')" onMouseout="coloroff()">なす</td> <td> </td> <td> </td> </tr> <tr> <td class="vegetable" onMouseover="colorset(this,'green')" onMouseout="coloroff()">とまと</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="3" class="cereal1">肉1</td> <td rowspan="3" class="cereal2">肉2</td> <td class="cereal" onMouseover="colorset(this,'blue')" onMouseout="coloroff()">豚肉</td> <td> </td> <td> </td> </tr> <tr> <td class="cereal" onMouseover="colorset(this,'blue')" onMouseout="coloroff()">鶏肉</td> <td> </td> <td> </td> </tr> <tr> <td class="cereal" onMouseover="colorset(this,'blue')" onMouseout="coloroff()">牛肉</td> <td> </td> <td> </td> </tr> </table> くだもの１やくだもの２のclassを fruit1 に統一して if(obj[i].className == cName+"1") { obj[i].style.backgroundColor = colors; でも出来るのですが選択的なものを感じるのであえて別のclass名にしました ・・・とりあえずこれで出来ているとは思うのですがスタイルシートの存在を見落としていまして無地背景になってます（－－；） あと右2つの空白セルには何が入るのでしょう？ これも一緒に変更していくという方向で考えた方がいいのでしょうか？(質問ソースはそのようになっているようですが） p.s. 前回質問もそうですが解決の糸口が見えたのであれば質問を締め切ってください それで一段落しているのか、まだ別の回答を待っているのか分からないです（＞＜） 解決してないようだったらまた夜考えてみます（＾＾）
- OKbokuzyo
- ベストアンサー率43% (130/296)
ざっとしか見てないが、html文書内に同じ値の属性idがあるのおかしくないか？ getElementByIdメソッドの返り値はNodeなわけでNodeListではないんだが‥。 そのへんが関与してる希ガス。（ごめん、眠くてちゃんと見てない） てか、Id決め打ちできるんなら onmouseenterとonmouseleaveイベントハンドラを持たせたらいいんじゃないか？（汎用的にしたいならイマイチだが‥） 使い方に因ればはもっと簡単に書けると思う。 同じ値の属性をもたせるなら「name」とか「sammary」とかが一般的。 DOMには「name」属性からノードリストを引っ張るgetElementsByNameがある。 （※ ただし、IEではなぜか「name」属性ではなく「id」属性がとれる） あと、前回の経緯がわからないから、なんでこんなコードになっているのかわからない。 同じ質問したってまた同じ回答されるだけだぜ？ 前回の経緯がわかるようにＵＲＬ貼っておくと、回答者も前回の内容踏まえて回答できるから便利。
お礼
お返事ありがとうございます。 OKbokuzyoさんの言う通りですね。。すみません。 この場をお借りしてURLを貼ります・・・m(_ _)m http://oshiete1.goo.ne.jp/qa3357832.html 私もhtml文書内に同じ値のid属性があるであれ？と 思いましたが、それに近い動きをするので いいのかな・・・とも思ってしまいました(^^;) そんなことを思い、色々やってみましたが、、、 わけがわからなくなってきてしまいましたので、 質問致しました。。
関連するQ&A
- onMouseOverで複数（？）のセル内の色を変更したいとき
はじめまして、こんにちは。 初歩的な質問なので恐縮ですが、、どうしてもわからないのでどなたか教えてください(> <) テーブルの各行の上をカーソルが通過するとその行の色が変わる（通過しおわると元の色に戻る）というのをプログラムを作りたいのです。。 一行ごとでしたらonMouseOver,onMouseoutを使って 簡単にできますが、カーソルが『りんご』の行の上にあるときは『くだもの』のセルも一緒に色を変える、また『みかん』の行の上のときも『くだもの』のセルも一緒に色を変える・・・というように『バナナ』も『メロン』も同じように色変更させたいのです・・・ 説明が下手で大変申し訳ございませんが、どうかよろしくお願い致します。（ジャバスクリプトは勉強を始めたばかり・・・というレベルなのです比較的簡単なソースでお願いします） ソースは下記になります↓ <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4">くだもの</td> <td>りんご</td> <td> </td> <td> </td> </tr> <tr> <td>みかん</td> <td> </td> <td> </td> </tr> <tr> <td>バナナ</td> <td> </td> <td> </td> </tr> <tr> <td>メロン</td> <td> </td> <td> </td> </tr> <tr> <td rowspan="2">野菜</td> <td>なす</td> <td> </td> <td> </td> </tr> <tr> <td>とまと</td> <td> </td> <td> </td> </tr> </table> よろしくお願い致しますm(__)m
- ベストアンサー
- JavaScript
- tableの左側の色をCSSで一回で変えたい
tableの左側の色をCSSで一回で変えたいのですが、どのようにするのが一番良いのでしょうか？現在はclassを使っています。 アドバイス宜しくお願いします。 <head> <style type="text/css"> <!-- table { height: 400px; width: 400px; } .tableleft { background-color: #FF0000; } --> </style> </head> <body> <table summary="ABCD" > <caption>ABCD</caption> <tr> <td class="tableleft">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td class="tableleft">1</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="tableleft">2</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="tableleft">3</td> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
- ベストアンサー
- HTML
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- tdの中のbackgroundを繰り返しにしたくない
webページをテーブルで組んだとき、1つだけのtd内にbackgroundを設定しているのですが、縦や横に長くなったときに、同じ画像が繰り返し表示されます。そこで、どのようにして繰り返しをなくせばいいのでしょうか？因みに、 <table> <tr> <td colspan="2" align="center"> <img src="aaa.gif"></td> </tr> <tr> <td rowspan="2" background="bbb.jpg"> </td> <td align="center"> <img src="ccc.gif"></td> </tr> <tr> <td align="center"> <img src="ddd.gif"></td> </tr> </table> 上記HTMLで、bbb.gifにあたります。 どなたかご存知な方は教えてください。お願いします。
- ベストアンサー
- HTML
- スマホからアクセス来た時だけtableを変更したい
jqueryを利用して、スマホからアクセス来た時だけ、 tableタグの特定の列に<tr></tr>を追加したいのですが可能でしょうか？ やりたいことは下記のテーブルの, <table> <tr> <td class="a">aaaaaaaa</td><td class="b">bbbbbbbbbb</td> </tr> <tr> <td class="a">aaaaaaaa</td><td class="b">bbbbbbbbbb</td> <tr> </tr> <td class="a">aaaaaaaa</td><td class="b">bbbbbbbbbb</td> </tr> </table> td class="b"に<tr>タグを付加して、このようにしたいのですが、 <table> <tr> <td class="a">aaaaaaaa</td></tr><tr><td class="b">bbbbbbbbbb</td> </tr> <tr> <td class="a">aaaaaaaa</td></tr><tr><td class="b">bbbbbbbbbb</td> </tr> <tr> <td class="a">aaaaaaaa</td></tr><tr><td class="b">bbbbbbbbbb</td> </tr> </table> 可能でしょうか？ スマホの判別方法は、 $(function(){ // 480px以下の幅のブラウザでアクセスした時は $(window).resize(function(){ var w =$(window).width(); var x = 481; if (w < x){ これでOKでしょうか？ if文の続きが何を書いても上手く動いてくれません。 どうぞご教授よろしくお願いします。
- ベストアンサー
- JavaScript
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
- 表の結合をｃｓｖで保存するには？
教えてください。 商品検索ツールを利用しています。 商品詳細データはｃｓｖで保存されます。 表の結合をしたいのですがうまくいきません。 たとえばビルダーで編集すると <TABLE border="1"> <TBODY> <TR> <TD colspan="4"> 商品の詳細</TD> </TR> <TR> <TD rowspan="2"> コード </TD> <TD colspan="2"> サイズ</TD> <TD rowspan="2">価格 </TD> </TR> <TR> <TD>mm </TD> <TD> インチ</TD> </TR> <TR> <TD> 000005</TD> <TD> ***</TD> <TD>○○ </TD> <TD> ￥50</TD> </TR> </TBODY> </TABLE> と、このようにソースに表示されますが、 これらをｃｓｖで保存しても？？？になります。 このような表をcsvファイルで作成することは可能なのでしょうか？ よろしくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- チェックボックス設定の方法教えてください
チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。
- ベストアンサー
- JavaScript
- Table内TDの子要素を移動させたいのですが・・
初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD> ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？
- ベストアンサー
- JavaScript
- tableの中のtableが追加できない。
罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する 処理を作成しましたが、追加した罫表が正しく表示されません。 罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。 なぜtableの中のtableが作られないのでしょうか。 別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。 以下HTMLとjsです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="kei_test.js"></script> </head> <body> <div> <input type="button" value="罫表追加" onclick="addDanraku('keihyou')" /> </div> <form name='form1'> <input type="text" name="strJbnTxt" size=100 maxlength=10000 /> </form> <table width="100%" border=1 style='border-collapse:collapse;border:none'> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt'> <p>あいうえお。</p> </td> </tr> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt;'> <p>かきくけこ。</p> </td> </tr> </table> </body> </html> 以下jsファイル var cellCnt = 0; var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; //alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } function addDanraku( danraku ){ if( cellCnt != 1){ alert("１つのみ選択して実行してください。"); return; } //trを取得 var trNode = document.getElementsByTagName("tr"); var trLength = trNode.length; for(var i = 0; i < trLength; i++) { if( i == rowArray[0]){ //新しい段落（tr）を追加 var newTr = document.createElement("tr"); var nextTr = trNode[i].nextSibling; var oyaTable = nextTr.parentNode; oyaTable.insertBefore(newTr, nextTr); //tdを追加 var newTd = document.createElement("td"); newTd.style.width = "100.0%"; newTd.style.border = "solid windowtext 1.0pt"; newTr.appendChild(newTd); //tableノードを追加 alert(newTd.nodeName); var newTable = document.createElement("table"); newTable.style.border = "none"; newTable.style.borderCollapse = "collapse"; newTd.appendChild(newTable); //trノードを追加 for(var j = 0; j < 2; j++) { var newTr2 = document.createElement("tr"); newTable.appendChild(newTr2); for(var k = 0; k < 2; k++) { //tdノードを追加 var newTd2 = document.createElement("td"); newTd2.style.width = "100.0pt"; newTd2.style.border = "solid windowtext 1.0pt"; newTr2.appendChild(newTd2); //pノードを追加 var newP2 = document.createElement("p"); newTd2.appendChild(newP2); //textノードを追加 var newText2 = document.createTextNode("追加テスト"); newP2.appendChild(newText2); } } } } form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML; }
- ベストアンサー
- JavaScript
お礼
お返事ありがとうございます。 すみません、質問は自分で締め切るのは知りませんでした。。 右２つのセルもなんらかの文字が入るので、 これも一緒に変更していくという方向です。 よろしくお願い致します。 （わかりずらい説明ですみません＞＜） スタイルシートの存在を見落としていたとの事ですが、 色はちゃんとついてました(^^)/