OCNのモバイルに新コース登場!キャンペーン続々開催中

javascriptはカスタマイズもままならないくらいの無知なのですが、検索してもどうしてもわからず、お教えいただけたらと思いご質問いたします。

題名の通り、項目にそれぞれチェックボックスまたはラジオボタンがあり、
チェックされると、そのテーブルの行(tr)の背景に色を付けたいのです。
(yahooメールやgmailのようなものです)

参考になりそうなものを検索しては見るのですが、どうしてもカスタマイズでつまづいてしまいます。
例えば、以下のページでは、変更する指定がidであったため出来ませんでした。
http://homepage2.nifty.com/godakaz/laboratory/ba …
(同じ色を複数箇所で変更できるようなものがよいです)

または、
http://javascript.style-mods.net/dhtml/dhtmltips …
こちらのページはfirefox(win)で実現できていないようで。。

どのようにすればできるでしょうか?
どうぞどうか何卒よろしくお願い致します。

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

A 回答 (6件)

<html>


<head><style>
.red{background-color:#d00} .def{background-color:#ddf}
</style></head>
<body>
a
<table border="1">
<tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>abc</td>
<tr class="def"><td><input type="checkbox" onClick="setTR(this,'red')"></td><td>def</td>
<tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>ghi</td>
<tr class="def"><td><input name="a" type="radio" onClick="setTR2(this,'red')"></td><td>jkl</td>
</table>
<script>
function setTR2(o,c){
obj = document.getElementsByName(o.name);
for(i=0;i<obj.length;i++){parentSearch(obj[i],'TR').className='def';}
setTR(o,c);
}
function setTR(o,c){parentSearch(o,'TR').className=o.checked?c:'def';}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}
</script>
</body>
</html>
    • good
    • 1

<script type="text/javascript">


window.onload = function(){
document.getElementById('form1').reset();

}
function ChgTR(e){
var el = e.target || e.srcElement;
if(el.type == 'checkbox' || el.type == 'radio'){
function GetTR(tr){while(tr.tagName != 'TR'){ tr = tr.parentNode; } return tr; }
if(el.type == 'radio'){
var Names = document.getElementsByName(el.name);
for(var i=0; i<Names.length; i++){ GetTR(Names[i]).style.backgroundColor = "#ffffff"; } //未選択色
}
GetTR(el).style.backgroundColor = el.checked ? "#cc0000" : "#ffffff";
}
}
</script>

<form id="form1">

<table onclick="ChgTR(event)">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input name="a1" type="radio"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input name="a1" type="radio"></td><td>dddddd</td><td>444444</td></tr>
<tr><td><input name="a2" type="radio"></td><td>eeeeee</td><td>555555</td></tr>
<tr><td><input name="a2" type="radio"></td><td>ffffff</td><td>666666</td></tr>
</table>

</form>


寝るので(はやい^^;)、普通のラジオボタンと仮定して選択が移ってしまった所は元に戻すようにしたサンプルです。

それから、リロードされると背景色はデフォルトに戻ってしまいますが、フォームのチェックが残るブラウザ(Firefox)の事を考えて、
window.onload = function(){ } をつけてフォームをリセットするのもつけておきました。
フォームが複数ある場合は、同じパターンでフォームIDを指定して reset() させる記述を増やしてください。
document.getElementById('フォーム名').reset();
フォームのIDをつけるのが何らかの理由で困難な場合は、
『何個目か?』を取れるなら、その何個目(0から数える)を数字として
document.forms[番号].reset();
としてください。

他のスクリプトでwindow.onload がある場合は、そこの中に記述。
    • good
    • 0

こんにちは



>複数ヶ所で変更したい
id指定ではなく、class名指定などにすればできますよ
※inoutなどにもclass名をつけたりしていてもっと良い使い方があると思うのであまり良いサンプルとは言えませんが・・・

<script type="text/javascript"><!--

//class名を指定する為の準備//
document.getElementsByClassName = function (className) {
var i, j, eltClass;
var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
var objCN = new Array();
for (i = 0; i < objAll.length; i++) {
eltClass = objAll[i].className.split(/\s+/);
for (j = 0; j < eltClass.length; j++) {
if (eltClass[j] == className) {
objCN.push(objAll[i]);
break;
}
}
}
return objCN;
}

//色指定の準備//
COLOR = new Array("#ffcc00","#0044ff");

//色変更//
function ChgCol(n,i) {
if(i.checked) { col = COLOR[n]; }
else { col ="#ffffff"; }

cName = "tr"+n;
chName = "ch"+n;

obj1= document.getElementsByClassName(cName);
obj2= document.getElementsByClassName(chName);

for(i=0;i<obj1.length;i++) {
obj1[i].style.backgroundColor = col;
}

if(col == "#ffffff") {
for(i=0;i<obj2.length;i++) {
obj2[i].checked = false;
}
}

}

//--></script>
</head>
<body>

<div>
<form name="frm">
<table border="1">
<tr class="tr0">
<td>
<input type="checkbox" class="ch0" onClick="ChgCol('0',this);">
</td>
<td>青</td>
<td>青りんご</td>
</tr>
<tr class="tr1">
<td>
<input type="checkbox" class="ch1" onClick="ChgCol('1',this);">
</td>
<td>赤</td>
<td>赤とんぼ</td>
</tr>
<tr class="tr0">
<td>
<input type="checkbox" class="ch0" onClick="ChgCol('0',this);">
</td>
<td>緑</td>
<td>冬みかん</td>
</tr>
</table>
</form>
</div>


で、下のほうでFirefoxでできないのははdocument.allを使用しているからです
<script type="text/javascript"><!--
function Click_Sub(i) {
X = "x"+i;
Y = "y"+i;
if (document.getElementById(Y).checked==true) {
document.getElementById(X).style.backgroundColor='#cccccc'
} else {
document.getElementById(X).style.backgroundColor='#ffffff'
}
}
//--></script>

<table border=1 width=100%>
<tr id="x1"><td><input id="y1" type="checkbox" onclick="Click_Sub('1')">チェック<td>テキスト1
<tr id="x2"><td><input id="y2" type="checkbox" onclick="Click_Sub('2')">チェック<td>テキスト1
</table>
    • good
    • 0

そのラジオボタンの動きについて



複数に同じnameがついていて、その中からの単一選択でチェックが移動する普通の使い方?
この場合、チェックが外れた所を元の色に戻す?


それともチェックボックスと同じ動きで、1個に1個のnameで、チェックが付いてる物をクリックすとチェックが外れるとか?


ラジオボタンはチェックボックスと動きが違うので、その辺の実際の目的の動作をかいてください^^;
    • good
    • 1

<script>


window.onload = function(){
document.getElementById('table1').onclick = function(e){
var el = window.event? event.srcElement : e.target;
if(el.type != 'checkbox'){ return false; }
var tr = el;
while(tr){
if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; }
tr = tr.parentNode;
}
}

}
</script>
<table id="table1">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr>
</table>

window.onload を他に使っていて書換えが難しいなら
onlick イベントハンドラを テーブルタグに書く方法↓で。

<script>
function ChgTR(e){
var el = e.target || e.srcElement;
if(el.type != 'checkbox'){ return false; }
var tr = el;
while(tr){
if(tr.tagName == 'TR'){ tr.style.backgroundColor = el.checked ? "#cc0000" : "#ffffff"; break; }
tr = tr.parentNode;
}

}
</script>

<table id="table1" onclick="ChgTR(event)">
<tr><td><input type="checkbox"></td><td>aaaaaa</td><td>111111</td></tr>
<tr><td><input type="checkbox"></td><td>bbbbbb</td><td>222222</td></tr>
<tr><td><input type="checkbox"></td><td>cccccc</td><td>333333</td></tr>
<tr><td><input type="checkbox"></td><td>dddddd</td><td>444444</td></tr>
</table>


どちらのサンプルもテーブルのIDは table1。
色の部分は自分で好きなように変更。
    • good
    • 0
この回答へのお礼

ご回答大変ありがとうございます!
大項目によってテーブルが複数あるので、テーブルにIDを指定することが出来なかったので、下のサンプルで出来ました!
しかしながら…実は、「チェックボックス」と「ラジオボタン」が混在していまして、どちらもチェックされた項目のセル背景を変更したいでのです。。
スクリプトのcheckboxをradioに変えてもだめなようです。。
どうしたらよいでしょうか…

お礼日時:2008/03/09 21:54

<html>


<head><style>
.red{background-color:#d00} .def{background-color:#ddf}
</style></head>
<body>
<table border="1">
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>abc</td>
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>def</td>
<tr class="def"><td><input type="checkbox" onClick="setTR('red')"></td><td>hgi</td>
</table>
<script>
function setTR(c){
eob = event.srcElement; obj = parentSearch(eob,'TR'); obj.className=(eob.checked)?c:'def';
}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}
</script>
</body>
</html>
    • good
    • 0
この回答へのお礼

ご回答大変ありがとうございました!
IE6(win)では動いたのですが、firefox(win)で出来ないようでした。。
出来ればfirefoxでも見られる方がいいです。

お礼日時:2008/03/09 21:40

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qチェックボックスの背景色って指定できる??

<input type="checkbox"の背景色を灰色に
指定したいのですが、できますでしょうか?

チェック可能です。
IE3,IE4,IE5
Windows2000

Aベストアンサー

背景色とはチェックボックスの横に出る文字も含めての背景でしょうか?であれば以下の様なやり方ではいかがでしょうか?
(styleでwidth指定していますが、これがないと行全体に色が付いてしまいます。)

<div style="width:0;background-color:red;">
<input type="checkbox">test
</div>

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
(あと、詰めすぎは見づらいので、適当に空白を入れました)

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

Q選択行だけ色を変更する場合のCSSの書き方

以下のHTMLで、どうすれば、選択行だけ青に変更できるでしょうか?

<table>
<tr>
<td class="lc">
<input type="button" value="色変更" onClick="選択行だけ青に変えたい">
</td>
<td class="lc">赤</td>
<td class="lc">赤</td>
</tr>
<tr>
<td class="lc">
<input type="button" value="色変更" onClick="選択行だけ青に変えたい">
</td>
<td class="lc">赤</td>
<td class="lc">赤</td>
</tr>
</table>

Aベストアンサー

#1です。
CSSに関しては#3様が回答済みなので…

>1.ユーザがチェックBOXを選択した行だけ色を変更したい
>2.ユーザがマウスカーソルをあてた行だけ色を変更したい
↑だけでは、やりたいことがよくわかりませんが、おもいっきり勝手な
想像で雰囲気のみのサンプルを
(#5様が既に同様のものを御提示済みですが、まぁ、感じが違うの
 で一応ご参考までに。 あとは適当にいじってください。)

tableの外側に余白があればmouseoutは設定しなくてもいけるけれど、直接ウィンドウ外に出てしまえるようだと消し損ねるので、おまけで設定しています。

<html>
<head><title>test</title>
<style type="text/css">
table.sample { border-collapse:collapse; }
table.sample thead td { border-bottom:2px groove #EEE; }
table.sample td { width:4em; text-align:center; }
table.sample tr.checked td { color:red; font-weight:bold;}
table.sample tr.hover td { background-color:#DDC; }
</style>

<body>
<table class="sample">
<thead><tr>
<td>色変更</td><td>項目1</td><td>項目2</td>
<td>項目3</td><td>項目4</td>
</tr></thead>
<tbody>
<tr><td><input type="checkbox" name="color"></td>
<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
</tr>
<tr><td><input type="checkbox" name="color"></td>
<td>2-1</td><td>2-2</td><td>3-3</td><td>2-4</td>
</tr>
<tr><td><input type="checkbox" name="color"></td>
<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
</tr>
<tr><td><input type="checkbox" name="color"></td>
<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td>
</tr>
<tr><td><input type="checkbox" name="color"></td>
<td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
(function() {
var i=0, tt, t = document.getElementsByTagName('TABLE');
while (tt = t[i++]) if (tt.className == 'sample') {
addEvent(tt, 'click', test);
addEvent(tt, 'mouseover', test);
addEvent(tt, 'mouseout', test);
}
function test(evt) {
var f, t = evt.target || evt.srcElement;
if (evt.type == 'click') {
if (t.nodeName == 'INPUT' && t.type == 'checkbox') setClass(tr(t), 'checked', t.checked);
} else {
f = !(evt.type == 'mouseout');
if (t.nodeName != 'TD' && t.nodeName != 'INPUT') return;
t = tr(t);
if (t.parentNode.nodeName == 'TBODY') setClass(t, 'hover', f);
}
function setClass(e, n, f) {
n = ' ' + n;
if (f) { e.className += n; } else { e.className = e.className.replace(n, ''); }
}
function tr(e) {
while (e.nodeName != 'TR') e = e.parentNode;
return e;
}
}
function addEvent(elm, eName, func) {
/*@cc_on elm. @if(@_jscript) attachEvent('on' +
@else @*/ addEventListener( /*@end @*/
eName, func, false);
}
})();
</script>
</body>
</html>

#1です。
CSSに関しては#3様が回答済みなので…

>1.ユーザがチェックBOXを選択した行だけ色を変更したい
>2.ユーザがマウスカーソルをあてた行だけ色を変更したい
↑だけでは、やりたいことがよくわかりませんが、おもいっきり勝手な
想像で雰囲気のみのサンプルを
(#5様が既に同様のものを御提示済みですが、まぁ、感じが違うの
 で一応ご参考までに。 あとは適当にいじってください。)

tableの外側に余白があればmouseoutは設定しなくてもいけるけれど、直接ウィンドウ外に出てしまえるよう...続きを読む

Qラジオボタンでテーブルの背景色を変える

いつもお世話になっています。
テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように
目印をつけたいと思っています。
ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため
加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。

が、こういうことってできるのでしょうか?

ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って
色々試しましたが全て失敗でした(涙)。

どなたかご存知の方、教えてください。

ちなみにテーブルのイメージは大体こんな感じです↓

<p align=center>
<TABLE frame=below rules=all WIDTH=98% vspace=100>
<tr>
<td width=7% align=right><input type="radio" name="count" value="1"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
<tr>
<td width=7% align=right><input type="radio" name="count" value="2"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
<tr>
<td width=7% align=right><input type="radio" name="count" value="3"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
</table>

いつもお世話になっています。
テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように
目印をつけたいと思っています。
ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため
加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。

が、こういうことってできるのでしょうか?

ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って
色々試しましたが全て失敗でした(涙)。

どなたかご存知の方、教えてください。

ちなみ...続きを読む

Aベストアンサー

こんにちはlovelypoohさん、xruzです。
Ie5.5sp2,Ie5.0sp2で動作確認済み、NN動作不可。

<html>
<head>
<title></title>
</head>
<script language="javascript">
<!--
var saveTr;
function setBg(rd) {
if(saveTr) saveTr.bgColor="white";
saveTr=rd.parentNode.parentNode;
saveTr.bgColor="lavenderblush"
}
//-->
</script>
<Body>
<form method="post" name="frm">
<p align=center>
<table frame=below rules=all width=98% vspace=100>
<tr>
<td width=7% align=right>
<input type="radio" name="count" onClick="setBg(this);"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
<tr>
<td width=7% align=right>
<input type="radio" name="count" onClick="setBg(this);"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
<tr>
<td width=7% align=right>
<input type="radio" name="count" onClick="setBg(this);"></td>
<td align=right width=8%>1234567</td>
<td align=left width=18%>12345678901234567890</td>
<td align=right width=8%>12</td>
<td align=right width=8%>150</td>
<td align=right width=8%>300</td>
</tr>
</table>
</form>
</body>
</html>

こんな感じで良かったでしょうか?

こんにちはlovelypoohさん、xruzです。
Ie5.5sp2,Ie5.0sp2で動作確認済み、NN動作不可。

<html>
<head>
<title></title>
</head>
<script language="javascript">
<!--
var saveTr;
function setBg(rd) {
if(saveTr) saveTr.bgColor="white";
saveTr=rd.parentNode.parentNode;
saveTr.bgColor="lavenderblush"
}
//-->
</script>
<Body>
<form method="post" name="frm">
<p align=center>
<table frame=below rules=all width=98% vspace=100>
<tr>
<td width=7% align=right>
<inpu...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qjavascript クリックすると、あるテーブルのセルの色を複数個所変化させたい

ある、場所をクリックすると、
あるテーブルのセルの背景色が変わるというものを作っています。

特定の場所を変化させるには”all()”を使うと知り
javascript には、ある場所をクリックすると

document.all('td01').style.backgroundColor='#44EE77';

というような処理をさせることにしました。
すると
<td id="td01"></td>
と記述した部分はちゃんと色が変わったのですが、
複数のセルの色を変える必要がある部分があり
複数にわたって
<td id="td01"></td>
<td id="td01"></td>
というようにtd01を指定すると、やはりエラーが起こりました。
その後、いろいろ調べてみたのですが、
最初に書いたような背景色を変化させる処理を
複数個所に渡って指定するという方法が分かりません。
どうすれば、複数個所の色を変えることができるのでしょうか?

Aベストアンサー

>ある、場所をクリックすると、
>あるテーブルのセルの背景色が変わるというものを作っています。
>複数のセルの色を変える必要がある部分があり

クリックする場所が一箇所なのか、複数個所なのか不明ですが、とりあえずボタンにしてあります。
色分けしたいセルをグルーピングしておいて、色を変えるサンプルです。
グループは複数あっても可。HTML内に書くと一つのセルが複数のグループに属した場合面倒なので、スクリプト内でグループを定義しています。
(colspanやrowspanで連結している場合までは配慮していません。)

<html>
<head>
<style type="text/css">
td {width:50px; height:50px; text-align:center;}
</style>
<script type="text/javascript">
var gr=[];
gr[1]="yellow,1/1,2/2,3/3,4/4"; //◆Group1 色,行/列,行/列…
gr[2]="red,1/4,2/3,3/2,4/1"; //◆Group2 色,行/列,行/列…

function test(n) {
var tbl=document.getElementById('table1');
var g=gr[n].split(',');
var td=tbl.getElementsByTagName('TD');
for (var i=0; i<td.length; i++) td[i].style.backgroundColor='';
var tr=tbl.getElementsByTagName('TR');
for (i=1; i<g.length; i++){
var rc=g[i].split('/');
if (tr[rc[0]-1]){
td=tr[rc[0]-1].getElementsByTagName('TD');
if (td[rc[1]-1]) td[rc[1]-1].style.backgroundColor=g[0];
}
}
}
</script>
</head>
<body>
<table id="table1" border=1>
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
</table>

<p><button onclick="test(1)">グループ1変更</button>
 <button onclick="test(2)">グループ2変更</button>
</body>
</html>

>ある、場所をクリックすると、
>あるテーブルのセルの背景色が変わるというものを作っています。
>複数のセルの色を変える必要がある部分があり

クリックする場所が一箇所なのか、複数個所なのか不明ですが、とりあえずボタンにしてあります。
色分けしたいセルをグルーピングしておいて、色を変えるサンプルです。
グループは複数あっても可。HTML内に書くと一つのセルが複数のグループに属した場合面倒なので、スクリプト内でグループを定義しています。
(colspanやrowspanで連結している場合まで...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q一覧から選択した行の行番号を取得について

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%...続きを読む

Aベストアンサー

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピ...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

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)はこれら以外にも
いろいろな設定方法があります。


人気Q&Aランキング