人に聞けない痔の悩み、これでスッキリ >>

いつもお世話になっております。
IE6.0上で動作するものとして質問させていただきます。

以下のソースの中でBODYタグのonloadイベントで
initメソッドを呼びだし、メソッド中で
表中の任意のセルの背景色を変更するにはどのように
すればよいのでしょうか。


---------------------------------------

<HTML>
<HEAD>
<script language="JavaScript">
<!--
function init(){

//------ここでで各セルの背景色を変更したいのです。

}
-->
</script>

</HEAD>
<BODY onload="init(); ">
<FORM name="tttt">
<TABLE border="1" >
 <TBODY>
  <TR>
   <TD onClick="this.style.backgroundColor = 'black';">test</TD>
   <TD onClick="this.style.backgroundColor = 'red';">test</TD>
   <TD onClick="this.style.backgroundColor = 'yellow';">test</TD>
  </TR>
 </TBODY>
</TABLE>
</FORM>
</BODY>
</HTML>

---------------------------------------


ソースは簡略化しておりますので、内容に不備がございましたら、ご容赦ください。

ご回答をよろしくお願いいたします。

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

A 回答 (2件)

1.<form>は必要無い。


2.<body>のonLoadも要らない。

IE限定でやる気なら咎めませんが、<td>のonClickはあまり有効的ではないと思いますよ(一応)


<script language="JavaScript">
<!--
function ChgBg(id,color){
if(document.getElementById){
document.getElementById(id).style.background = color;
}
}
// -->
</script>
<table>
<tr>
<td id="td1" onClick="ChgBg('td1','black')">hoge......</td></tr>
<tr>
<td id="td2" onClick="ChgBg('td2','red')">foo.......</td></tr>
<tr>
<td id="td3" onClick="ChgBg('td3','yellow')">bar.......</td></tr>
</table>

initじゃなく、ChgBgって関数にしてます。
適時変更してみてください。
    • good
    • 0

先の方の回答と重なる部分もありますが…



スクリプトの側から任意のセルの背景色を変更する場合、まずはその対象となるセルに固有のIDをふっておいて、それを辿って背景色を変更する処理を記述するのが良いと思います。 こちらの場合、formなどは使わなくてもすみます。

document.getElementById(***).style.backgroundColor="hoge";

と言う記述をJavaScriptの文中に入れることで、特定のID「***」を持つセルの背景色をhoge色にすることができます。
なお、これはDOMを利用した記述になり、古いブラウザではエラーメッセージをだすことがあるので、それを防止する意味で、

if (document.getElemenetById){~~~}

というif文の中で先述の処理を記述するのが望ましいと思います。

各セルに対してID名をふるのが困難、あるいは面倒な場合は、同じくDOMを使った方法になりますが、DOMではHTMLファイル中の各要素を配列としてソートして持っているという特性を使って、「TD」要素の配列を利用し、その番号によって要素を特定すると言う方法もあります。

if(document.getElementsByTagName){
document.getElementsByTagName("TD")[x].style.backgroundColor="hoge";
}

こう記述すると、そのHTMLファイルの中の(x+1)番目のセルの背景色をhoge色にすることができます。 このとき、配列の連番は0から開始されるので、1番目(一番初め)のセルを指定する場合の配列の番号は0になることに注意してください。 こちらの場合は、HTMLファイル中のセルの数・連番を管理できれば、body以下のテーブルのソースを書き換えなくても、特定のセルを指定することができます。

とりあえず、IE6での動作を重視してアドバイスしてみました。 他にも同様の処理をさせる記述方法はあるかもしれません。

あと、最後になんですが、ページを読み込まれたときに背景色を調整しておきたいと言う場合は、スクリプトを通じて背景色を操作するよりも、直接CSSで背景を定義したほうが早いかもしれません。 特定のセルにだけ特定の背景色をつけたいと言う場合は、IDやclassなどのセレクタをうまく使えばよいと思います。 スクリプトを使う必要性がさほど高くないケースでは、スタイルシートで定義してしまったほうが楽かもしれませんね。

参考になれば…
    • good
    • 0

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

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

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

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

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む

QTABLEのセルの中の文字を行単位、セル単位で色を変えたい

urizakaです
さて、質問なのですが、<TABLE>の中のセル<TD>の中に入れる文字の
色を変えることってできるんでしょうか?
それも、行単位とかセル単位という細かい単位で…
javaScriptを使うとできそうな気もしますが…
すみませんが、この件についてご存知の方宜しくお願いします。

Aベストアンサー

javaScriptでなくてもできます。

<table>
<tr bgcolor="silver"> ・・・ここでセルの色を指定
<td><font color=blue>ためし1</font> ・・・ここでセル内の文字の色を指定
</td></tr>
</table>

のようにすればセル単位での設定ができます。
また、このテーブルを真ん中におきたい場合は、
<table align="center">
とすればいいし、ボーダーを消すのなら
<table border="0">
とすればいい。
また、
<table border="0" align="center" cellpadding="0" cellspacing="0"
とすればボーダーもなく、真ん中にあり、しかもセル全部が
くっついているテーブルになる。

リンクを指定したい場合は

<tr align="center" bgcolor="#6f9fff">
<td><A HREF="****"><font size="2" color="red">お知らせ</font></A>
</td></tr>

と書けばいい。

bgcolorとfontcolorは16進数で表してもいいし、色の名前を
そのまま指定してもいいはず。色は COLOR CHART を検索して見つけて
ください。

javaScriptでなくてもできます。

<table>
<tr bgcolor="silver"> ・・・ここでセルの色を指定
<td><font color=blue>ためし1</font> ・・・ここでセル内の文字の色を指定
</td></tr>
</table>

のようにすればセル単位での設定ができます。
また、このテーブルを真ん中におきたい場合は、
<table align="center">
とすればいいし、ボーダーを消すのなら
<table border="0">
とすればいい。
また、
<table border="0" align="center" cellpadding="0" cellspacing="0"
とすればボーダーもなく...続きを読む

Qラジオボタンの選択肢をサーブレットで取得するには?

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="radiobutton">
割引手形 
<input type="radio" name="radiobutton" value="radiobutton">
手形貸付 
<input type="radio" name="radiobutton" value="radiobutton">
証書貸付
</p>

ブラウザー側からは
<form action="http://localhost/servlet/yuushi" method=post>
の指定を行っています。
サーブレットでの受け取り方を、
String p2=request.getParameter("radiobutton");
 とすると、p2=radiobuttonとデータがセットされました。

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="...続きを読む

Aベストアンサー

それぞれの項目の value を、ユニークにして下さい。例えば、

<input type="radio" name="radiobutton" value="1"> 割引手形 
<input type="radio" name="radiobutton" value="2"> 手形貸付 
<input type="radio" name="radiobutton" value="3"> 証書貸付

そうすれば、「手形貸付」を選択したときに

String p2 = request.getParameter("radiobutton");

とすれば、p2 は "2" になります。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

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の方も修正する方法でもよけ...続きを読む

QOracle(オラクル)で、日付時刻型の検索方法について

質問させていただきます。
データベースはオラクルを使っていて、
SQL文で、抽出するときにエラーが出て困っています。

日付時刻型が「2005/05/26 19:13:00」という感じで入ってます。
2005/05/26 を抽出したいのですが、
BETWEEN '2005/05/26 00:00:00' AND '2005/05/26 23:59:59'

だと、エラーでできません。
どなた様か、ご教授よろしくお願いしますm(_ _)m

Aベストアンサー

日付検索を行う場合は、以下のように書式を含める必要があります。

col BETWEEN TO_DATE('2005/05/26 00:00:00','YYYY/MM/DD HH24:MI:SS') AND TO_DATE('2005/05/26 23:59:59','YYYY/MM/DD HH24:MI:SS')

ただ、厳密には

col >= TO_DATE('2005/05/26', 'YYYY/MM/DD')
AND
col < TO_DATE('2005/05/27', 'YYYY/MM/DD')

と書くべきでしょうね。

Qハイパーリンクに下線を表示するには?

 現在、こちら↓のテンプレートを使っているのですが
http://sozai.blog18.fc2.com/blog-entry-69.html
ハイパーリンクに下線が表示されません。

 記事内のみ、もしくは一箇所のみ下線を表示する記述はあれば教えていだだきたいです。

Aベストアンサー

直接の場合
<a href="http://foo.ne.jp" style="text-decoration: underline">下線あり</a>
-------------------------------------
CSSの場合(アンカーが全部アンダーラインになる)
a { text-decoration: none; }

a { text-decoration: underline }
に変更
-------------------------------------
CSSで記事部分のみアンダーラインになる
.entry_body a { text-decoration: underline }

a { text-decoration: none; }
よりも下方面に追加記入する。
※記事部分のクラス .entry_body が変更されている場合は未適応

Q別ページからOnclickで背景色変更

いつもお世話になっております。

以下の過去質問で、同一ページ内によるonclickによる
セルの背景色変更を拝見しましたが、
同一ページではなく、別ページからonclickによって、
該当のページの任意のセル背景色変更は可能でしょうか。

http://oshiete1.goo.ne.jp/qa696811.html

(例)
a.htmlソース
<a href="b.html#b1" onClick="ChgBg('td1','black')">b1へリンク</a>

b.htmlの#b1へリンクすると、
idがtd1のセル背景色が変更される。。。

宜しくお願い申し上げます。

Aベストアンサー

var TB = {
b1:['td1','background-color:red'],
b2:['td2','background-color:blue']
};

/*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'load',function(){
var e,o=TB[location.hash.substring(1)];if(o&&(e=document.getElementById(o[0]))) e.style.cssText=o[1];},false);

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。


人気Q&Aランキング