• 締切済み

tableにまとめて関数

いつもお世話になっております。 今回はtableについてお聞きしたいです。 現在tableの各セルに同じ関数を適用するために以下のようにしています。 <table> <TR> <TD onclick="hoge();"></TD> <TD onclick="hoge();"></TD> ... <TD onclick="hoge();"></TD> </TR> </table> これを一つのtableすべてのTDについて行っているのですがファイルサイズを削りたいということになったので何とかまとめたいと思ったのですがうまい方法がわかりませんでした。 もし方法があるのでしたらご教授をお願いします。

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

では、idでテーブルを指定して、すべてのタグにメソッドを設定 すればよいでしょう <script> window.onload=function(){ var tags=document.getElementById("t0").getElementsByTagName("td"); for(var i=0;i<tags.length;i++){ tags[i].onclick=function(){ alert(this.innerHTML); } } } </script> <table border id="t0"> <TR> <TD>11</TD> <TD>12</TD> <TD>13</TD> </TR> <TR> <TD>21</TD> <TD>22</TD> <TD>23</TD> </TR> <TR> <TD>31</TD> <TD>32</TD> <TD>33</TD> </TR> </table>

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.2

<html> <table border="1"><tr><td>a</td><td>b</td><td>d</td><td>e</td><td>f</td><td>g</td></tr></table> <script> var mae; document.body.onclick = function(e){ var o = /*@cc_on @if(1) event.srcElement @else@*/ e.target /*@end@*/; if(o.tagName!='TD') return; x=o.cellIndex; y=parentSearch(o,'TR').sectionRowIndex; alert('x='+x+"/y="+y+"/ Text="+o.innerHTML); } function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;} </script>

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

<table onclick="hoge();"> じゃだめなの?

iec1128
質問者

補足

ご回答ありがとうございます。 それもやって見ましたが、それだとどのセルをクリックしたかわからず、関数の中でセルの座標を使いたかったのであきらめました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • テーブルの入れ子について

    このようにテーブルを入れ子にするのは不可能なのでしょうか? <table>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>   <td>4</td>  </tr>  <tr>   <td colspan="4">     <table>      <tr>      <td>5</td>       <td>6</td>       <td>7</td>       <td>8</td>      </tr>     </table>   </td>  </tr> </table> cssなどでいろいろと設定しても、 「5・6・7・8」のセルが「1」のセルの幅にしかなりません。 colspanしているセル全体にテーブルを置きたいのですが・・・。 間違いを教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • マウス位置取得方法

    いつもお世話になっております。 現在tableの各セルにonmouseoverを入れて、マウスの動きに追従してセルの色が変わるものを作っています。 その際、マウスを高速で動かすとマウスに色の変化が付いてこない状態になってしまいます。 原因は td.style.backgroundColor="#FFOOFF" という処理は行われているのですが、マウスを動かし続けるとonmouseoverが呼ばれ続けて、styleの表示の反映が遅れているようです。 そこで解決する方法を考えて調査したのですが方法がわからなかったのでお聞きします。 方法)onmouseoverが呼ばれたセルと現在マウスがあるセルを比較して違うものであった場合、関数を終了する。 この方法は、マウスが連続して動いているときは関数を処理しないでおく方法ですが、関数を呼ばれた後にマウスが動いたことを察知する方法がわかりません。 javascriptはマルチスレッドができないので、関数のそのステップ現在でのマウスの位置を知る方法がありましたらご教授願います。 現在のコードは以下のようなものです。 <script> function hoge() { //通過したセルの色を変える } </script> <table> <TR> <TD onmouseover="hoge();"></TD> ..... <TD onmouseover="hoge();"></TD> </TR> </TABLE> このようなtableのセルが300ほどあります。 以上、何かできることがありましたら、ちょっとしたことでも情報をいただきたいです。 よろしくお願いします。

  • テーブルの幅をデフォルトに戻すcssがわかりま

    <html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。

    • ベストアンサー
    • HTML
  • tableの各セルに同じ関数を対応させたい

    いつもお世話になっております。 今回はテーブルの各セルに同じ関数を対応させたいのですがいい方法が思い浮かばなかったので、そこをお聞きしたいです。 function swap(TD) {  if(TD.style && TD.style.backgroundColor)  {   TD.style.backgroundColor = '';  }  else  {   TD.style.backgroundColor = '#ff0000';  } } (略) <TD onclick="swap(this)"><INPUT type="hidden" name="xxx01" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx02" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx03" value="0"></TD> <TD onclick="swap(this)"><INPUT type="hidden" name="xxx04" value="0"></TD> swapという関数はセルの色を白と赤に交互に変えるものですが、ここにセルが白なら0を、赤なら1を各テキストに入れるという処理を加えたいです。 しかしながらnameがちょっと違うので一つ一つ関数を作らなくてはいけないのかと思っています。 nameのxxxの部分は共通で、お尻の数字が変わっていきます。 この規則性を使って何とかうまい方法はありませんでしょうか? ご教授お願いします。

  • テーブル内に2つのテーブルを作成した場合の位置の固定

    HTMLでテーブルの中に2つのテーブルを作成しました。 簡単に書くと以下のような感じです。 <table border="1"> <tr> <td align="center" valign="top"> <table border="1"> <tr> <td>hogehoge</td> </tr> </table> <br> <br> <table border="1"> <tr> <td>mogomogo</td> </tr> </table> </td> </tr> </teble> テーブル内の一つ目のテーブルをテーブルの上部に、もうひとつのテーブルをテーブル内の下部に表示したいのですがよい方法があるでしょうか?

    • ベストアンサー
    • HTML
  • CSSとテーブル

    <table width="630" class="sample1"> <tr> <td><table width="630" align="center" class="sample2">....</table></td> </tr> </table> 入れ子のテーブルまで"sample1"が適用されて困っています。 "sample2"を適用させる方法を教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルをテーブルで囲う意味はありますか?

    <table border=1> <tr><td> <table border=1> <tr><td> a </td><td> b </td></tr> </table> </td> </tr> </table> このようにテーブルをテーブルで囲う意味はありますか? htmlの勉強をしていて、 ネット上でテーブルのサンプルを拾ったのですが、 上記のようにテーブルをテーブルで囲んでました。 この方法でサイト上に100個くらいテーブルを作ってしまったのですが 今更ながらこういう書き方に意味はあるのかな? と思い始めてきました。 意味はあるのでしょうか?

    • ベストアンサー
    • HTML
  • どのセルをクリックされたのか

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa テーブルのどのセルをクリックされたかを得る方法を教えてください。 例えば36をクリックされたら(1,1)という値が得られるfunc()です。 getElementedByIdを使わない方法を教えてください。 <td>の1つ1つにonClickを書けばやりたいことはできますが HTMLファイルのサイズを小さくするために別の方法を考えています。 <table border=1 onClick=func()> <tr><td>15<td>18 <tr><td>52<td>36 </table> <script> function func(c){ alert() } </script>

  • tableの中にtableを作ると上部によらない

    tableの中に更にtableを作りたいのですが、内側のtableが上のほうに配置されず真ん中に出てしまいます。valign=topを使ったのですがうまくいきません。何か方法はありますでしょうか? <table height=500>   <tr><td> ---------- ここと ------------ <table height=250> <tr><td></td></tr> <tr><td></td></tr> </table> ---------- ここにかなりスペースが出来てしまう(*_*) </tr></td> </table>

  • テーブルのセルの高さ

    テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルA</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルB-1</TD><TD>セルB-2</TD></TR> <TR><TD>セルB-3</TD><TD>セルB-4</TD></TR> <TR><TD>セルB-5</TD><TD>セルB-6</TD></TR> <TR><TD>セルB-7</TD><TD>セルB-8</TD></TR> <TR><TD>セルB-9</TD><TD>セルB-10</TD></TR> <TR><TD>セルB-11</TD><TD>セルB-12</TD></TR> <TR><TD>セルB-13</TD><TD>セルB-14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルC</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルAとセルCの境界はセルBの高さの真中くらいに なると思います。 それで、セルAとセルCの内容は固定なのですが、セルB内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルBの大きさにかかわらず、セルAの高さを固定したいのです。 セルCはセルBの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか? セルAにHEIGHT指定してもなぜか、無視(?)されてしまいます・・・ よろしくお願いします。