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

表の一部のセルの背景色を変更したい

解決済

  • 質問者：o_w_nakazaki
  • 質問日時：
  • 回答数：2件

いつもお世話になっております。
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

「DOM 意味」に関するQ&A： 英単語に見かける　〇〇dom 意味するもの

さらに表示

「JavaScript ソート」に関するQ&A： WEB上の表でソートするためのJavaScript

「配列 ソート」に関するQ&A： excelＶＢＡ　配列ソート方法

「HTML 配列」に関するQ&A： 配列をhtmlで参照

「表 カラー」に関するQ&A： 刺繍糸のカラー対応表

A 回答 (2件)

No.1ベストアンサー

  • 回答者： the845t
  • 回答日時：

１．<form>は必要無い。


２．<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
    • 件
通報する

No.2

  • 回答者： lead1976
  • 回答日時：

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



スクリプトの側から任意のセルの背景色を変更する場合、まずはその対象となるセルに固有の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： 複数の画像ファイルを挿入したい

さらに表示

「HTML 配列」に関するQ&A： のぞみ　Ａ席～Ｅ席のレイアウト

「DOM 意味」に関するQ&A： 新車の初めてのオイル交換時期は？

「表 カラー」に関するQ&A： 高齢者が見えにくい色とは？

「表 JavaScript」に関するQ&A： javascriptでページ内の一部分だけを印刷する設定

「JavaScript ソート」に関するQ&A： クリックしたら順番に並び替わるようにするには

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

Q質問する（無料）

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

この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>ためし１</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は１６進数で表してもいいし、色の名前を
そのまま指定してもいいはず。色は COLOR CHART を検索して見つけて
ください。

javaScriptでなくてもできます。

<table>
<tr bgcolor="silver"> ・・・ここでセルの色を指定
<td><font color=blue>ためし１</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>
-------------------------------------
ＣＳＳの場合（アンカーが全部アンダーラインになる）
a { text-decoration: none; }
を
a { text-decoration: underline }
に変更
-------------------------------------
ＣＳＳで記事部分のみアンダーラインになる
.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で表示します。

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

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


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

Aベストアンサー

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

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

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

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

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

他の回答も見る
ページトップページトップ

Q質問する（無料）

人気Q&Aランキング

おすすめ情報