- ベストアンサー
nextsiblingの使い方
- javascript初心者のため、nextsiblingを使用してテーブルの値を取得することに試行しています。
- 2列目にリンクを追加しない場合、値を正常に取得できますが、リンクを追加するとうまくいきません。
- どのように修正すればよいでしょうか。
- obone
- お礼率51% (111/215)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
- babu_baboo
- ベストアンサー率51% (268/525)
関連するQ&A
- テーブルのレイアウトがおかしくなる
畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18"> </th> <th width="100"> </th> <th> </th> <th width="100"> </th> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3"> <!-- ここに たくさんの 文字列を入れると ・・・ --> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。 どのようにしたら良いか（width=100の部分を守らせたい） 教えてください。
- ベストアンサー
- HTML
- マウスオーバーで複数の画像を切り替える
こんにちわ、お知恵を拝借させて下さい。 1週間以上探していますが、なかなか答えに結びつきません。 現在下記の内容で<div id="photoAlbum"></div>内の二つの画像の同時切替を行なおうとおもっております。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript" src="main.js"></script> </head> <body> <table width="570"> <tr> <td><div id="photoAlbum"><img src="19.jpg" width="280" height="280"><img src="19pt01.jpg" width="280" height="280"></div></td> </tr> <tr> <td align="center"><img src="19.jpg" width="80" height="80" id="changeButton1"> <img src="26.jpg" width="80" height="80" id="changeButton2"> <img src="33.jpg" width="80" height="80" id="changeButton3"> <img src="40.jpg" width="80" height="80" id="changeButton4"> <img src="57.jpg" width="80" height="80" id="changeButton5"> <img src="64.jpg" width="80" height="80" id="changeButton6"></td></tr> <tr> <td align="center"> </td> </tr> <tr> <td><table width="438" border=0 cellpadding=3 cellspacing=1 bgcolor="#999999" style="FONT-SIZE: 9pt; LINE-HEIGHT: 100%"> <tr bgcolor=#e6e6e6> <td width="30%" nowrap><SPAN style="FONT-SIZE: 8pt"> JAN</SPAN></td> <td width="46%" nowrap><SPAN style="FONT-SIZE: 8pt"> 型番</SPAN></td> <td width="24%" nowrap><SPAN style="FONT-SIZE: 8pt"> カラー</SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 19</SPAN></td> <td><SPAN> BK</SPAN></td> <td><SPAN> <a href="#" id="changeButton7">ブラック</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 26</SPAN></td> <td><SPAN> GY</SPAN></td> <td><SPAN> <a href="#" id="changeButton8">グレー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 33</SPAN></td> <td><SPAN> NV</SPAN></td> <td><SPAN> <a href="#" id="changeButton9">ネイビー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 40</SPAN></td> <td><SPAN> GR</SPAN></td> <td><SPAN> <a href="#" id="changeButton10">グリーン</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 57</SPAN></td> <td><SPAN> OR</SPAN></td> <td><SPAN> <a href="#" id="changeButton11">オレンジ</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 64</SPAN></td> <td><SPAN> RD</SPAN></td> <td><SPAN> <a href="#" id="changeButton12">レッド</a></SPAN></td> </tr> </table></td> </tr> </table> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－ window.onload = function(){ document.getElementById("changeButton1").onmouseover = function() { album2.change(["19.jpg","19pt01.jpg"]); } document.getElementById("changeButton2").onmouseover = function() { album2.change(["26.jpg","26pt01.jpg"]); } ～中略～ document.getElementById("changeButton12").onmouseover = function() { album3.change(["64.jpg","64pt01.jpg"]); } } var album2 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } var album3 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum.mainbody").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } } } －－－－－－－－－－－－－－－－－－－－－－－－－－－－ 上記内容で試していますが、changeButton7～12が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。 何か、良い方法はないでしょうか
- ベストアンサー
- JavaScript
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- ＣＳＳについて 初心者です。
勉強中の身なんですが・・ このように設定した場合文章１と文章２が大きく開く状態になるんですが、なぜでしょうか？ また文章１セルの真ん中に表示され文章２が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますｍ（。。）ｍ 「ＨＴＭＬ」 <table> <tr> <th>見出し</th> <th></th> <th> </th> <th> </th> </tr> <tr> <td>内容</td> <td> </td> <td> </td> <td></td> </tr> </table> 「ＣＳＳ］ table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }
- ベストアンサー
- HTML
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
- HTML5について
現在MonacaでHTML5とCSS、JavaScriptを使って時間割表を作ろうと思ってます コードは <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> </head> <body> <center> <a href="index.html">戻る</a> <table border="5"> <tr bgcolor="#1FD3DF"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr><td width="20" height="80">1</td><td width="70"></td><td width="60"></td><td width="100"></td> <tr><td width="20" height="80">2</td><td width="70"></td><td width="60"></td><td width="100"></td> <tr><td width="20" height="80">3</td><td width="70"></td><td width="60"></td><td width="100"></td> <tr><td width="20" height="80">4</td><td width="70"></td><td width="60"></td><td width="100"></td> <tr><td width="20" height="80">5</td><td width="70"></td><td width="60"></td><td width="100"></td> </body> </html> です 理想では科目、教室、備考のところを自由に書き換え保存できるのが作りたいです <input>を使うとスマホのサイズ的に横にはみ出すし、Excelのようなものにしたいです どうすればよいのでしょうか？ご回答お願いします
- ベストアンサー
- HTML
- スタイルシート
<!-- span#k-11 { background-image : url("a.gif")} span#k-12 { background-image : url("b.gif")} span#k-21 { background-image : url("c.gif")} span#k-22 { background-image : url("d.gif")} --> <body> <table> <tr> <td><a href=""><span id="k-11" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-12" style="width:192; height:33;"></span></a></td> </tr> <tr> <td><a href=""><span id="k-21" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-22" style="width:192; height:33;"></span></a></td> </tr> </table> </body> 外部スタイルシートで、 同じ大きさ（width:192; height:33; gif画像の大きさ）のgif画像を、縦２×横２のテーブルを表示して、その個々の画像にリンクを貼りたいと思っています。 一応これできますが、もう少しbody内のテーブルを簡略したいと思いますが、なかなかうまいきません。 １．大きさの部分（width:192; height:33;）をスタイルに入れると、何故か画像が表示されなくなります。 ２．リンクの部分もスタイルに入れたいのですが、どのようにすればよいかわかりません。 どうぞご指導よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- ＜緊急＞テーブルを使わないで作るには？
お世話になります。 <table width="740" cellspacing="0"> <tr valign="middle"> <td width="367"></td> <td></td> </tr> <tr valign="middle" bgcolor="FFFFCE"> <td> <a href="A073.htm" target="_parent" class="style132">・ あああ</a></td> <td> <a href="A017.htm" target="_parent" class="style132">・ いいい</a></td> </tr> <tr valign="middle" bgcolor="FFCCFF"> <td> <a href="A069.htm" target="_parent" class="style132">・ ううう</a></td> <td> <a href="A043.htm" target="_parent" class="style132">・ えええ</a></td> </tr> <td></td> </tr> <tr valign="middle"> <td></td> <td></td> </tr> </table> こちらをテーブルタグを使わない形に変更したいと思っています。 どなたかお知恵をお貸しください、よろしくお願いいたします。
- ベストアンサー
- HTML
- 最後あたりに「/>」はなん役割がありのですか！？
http://okwave.jp/qa/q8312880.html 以上のURLをクリックすると、全プログラムがみれます。以下のプログラムは 以上プログラムを抜粋しました。 その、個々の構文の最後あたりに「/>」は、なんの役割があるのですか！？ たぶんHTMLだと思うのですが、教本が現在手元にないのでよく分かりません！？ よろしくお願いします。 <input type="button" id="exe" value=" 登録 "/> <input type="button" id="clr" value=" クリア "/> </th> </tr> <tr><th>代表者名:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク <input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク <input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン
- ベストアンサー
- HTML
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、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
お礼
ありがとうございました。 勉強いたします。