こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルでのハイライト表示について教えて下さい

皆さんこんばんわ。
いつも利用させてもらっています。
HTMLとJAVA SCRIPTの初心者です。
テーブルでのonmauseoverになっている時のハイライトにする
方法を教えて下さいTT

trをハイライトにするという内容の質問はありましたが、
今回は途中で背景色が変わるため、
どうしても作ることができませんでした。

一つ一つIDをふり、onmouseoverでの処理をさせてみましたが、
FirefoxではDOCTYPEの違いからか、エラーが出て表示することが
できませんでした。

項目的には残り100項目ほどありますので、どなたかお教え
いただけませんでしょうかTT

よろしくお願いします。


以下、ソースです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function TDBC0() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD2.style.background='#FFFFCC';
TD3.style.background='#FFFFCC';
TD4.style.background='#FFFFCC';
TD5.style.background='#FFFFCC';
TD6.style.background='#FFFFCC';
TD7.style.background='#FFFFCC';
}

function TDBC0C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD2.style.background='#f1f1e0';
TD3.style.background='#ffffff';
TD4.style.background='#ffffff';
TD5.style.background='#f1f1e0';
TD6.style.background='#fafaf5';
TD7.style.background='#fafaf5';
}


//身体測定 体重

function TDBC1() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD2.style.background='#FFFFCC';
TD3.style.background='#FFFFCC';
TD4.style.background='#FFFFCC';
}
function TDBC1C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD2.style.background='#f1f1e0';
TD3.style.background='#ffffff';
TD4.style.background='#ffffff';
}

//身体測定 体重

function TDBC2() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD5.style.background='#FFFFCC';
TD6.style.background='#FFFFCC';
TD7.style.background='#FFFFCC';
}
function TDBC2C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD5.style.background='#f1f1e0';
TD6.style.background='#fafaf5';
TD7.style.background='#fafaf5';
}
</script>
<head>

<body>
<table border="1" cellpadding="0" cellspacing="0" class="tbl004">
<tr>
<th rowspan="2" bgcolor="#C4E5FA" class="bg1">分 類</th>
<th rowspan="2" bgcolor="#C4E5FA" class="bg1">種類</th>
<th colspan="2" bgcolor="#C4E5FA" class="bg1">在庫数</th>
</tr>
<tr>
<th bgcolor="#C4E5FA" class="bg1">下 限</th>
<th bgcolor="#C4E5FA" class="bg1">上 限</th>
</tr>
<tr>
<th rowspan="2" bgcolor="#f1f1e0" class="tdBgcolor02" id="TD1" onmouseover="TDBC0()" onmouseout="TDBC0C()">書籍</th>
<td bgcolor="#f1f1e0" class="tdBgcolor02" id="TD2" onmouseover="TDBC1()" onmouseout="TDBC1C()">単行本</td>
<td bgcolor="#ffffff" id="TD3" onmouseover="TDBC1()" onmouseout="TDBC1C()">50</td>
<td bgcolor="#ffffff" id="TD4" onmouseover="TDBC1()" onmouseout="TDBC1C()">270</td>
</tr>
<tr>
<td bgcolor="#f1f1e0" id="TD5" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor02">文庫本</td>
<td bgcolor="#cccccc" id="TD6" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">10</td>
<td bgcolor="#cccccc" id="TD7" onmouseover="TDBC2()" onmouseout="TDBC2C()" class="tdBgcolor03">300</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2008-06-27 21:09:45

QNo.4134027

すぐに回答ほしいです

質問者が選んだベストアンサー

ちょっと汎用性に欠けるけど、
色の指定は全てCSSにする、
body内にごちゃごちゃ書かない、
行が増えても改造の必要がないように、書いてみました。
参考までに。
(theadとtbodyに分けたり、「種類」のカラムをthに変更したり、多少構成を変えてます。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
border-collapse:collapse;
}
th,td{
padding:0;
border:solid 2px #999999;
}
td{text-align:right;font-family:monospace;}
thead{
background-color:#C4E5FA;
}
tbody th{
background-color:#f1f1e0;
}
.bunko td{
background-color:#cccccc;
}
.highlight{
background-color:#FFFFCC !important;
}
</style>
<script type="text/javascript">
if(window.addEventListener) {
for (var property in Event.prototype){
if(property.match(/MOUSE|CLICK/)){
window.addEventListener(property.toLowerCase(), function(e){
window.event = e;
}, true);
}
}
}
var CurrentHighlight=new Array;//ハイライト中のセル
function Highlight(flag){
//ハイライト解除
while(CurrentHighlight[0]){
CurrentHighlight[0].className='';
CurrentHighlight.shift();
}
if(!flag) return;

var C=event.srcElement||event.target;
while(C&&C.nodeName!='TH'&&C.nodeName!='TD')C=C.parentNode;
if(! C) return;
var R=C.parentNode;
for(var j=0;R.cells[j];j++){
R.cells[j].className='highlight';
CurrentHighlight.push(R.cells[j]);
}
if(C.rowSpan>1){
for(var i=C.rowSpan;i>1;i--){
R=R.parentNode.rows[R.sectionRowIndex+1];
for(var j=0;R.cells[j];j++){
R.cells[j].className='highlight';
CurrentHighlight.push(R.cells[j]);
}
}
}else{
while(R.cells[0].rowSpan<2)R=R.parentNode.rows[R.sectionRowIndex-1];
R.cells[0].className='highlight';
CurrentHighlight.push(R.cells[0]);
}
}
</script>
</head>

<body>
<table>
<thead>
<tr>
<th rowspan="2">分類</th>
<th rowspan="2">種類</th>
<th colspan="2">在庫数</th>
</tr>
<tr>
<th>下限</th>
<th>上限</th>
</tr>
</thead>
<tbody onmouseover="Highlight(true)" onmouseout="Highlight(false)">
<tr>
<th rowspan="2">書籍</th>
<th>単行本</th><td>50</td><td>270</td>
</tr>
<tr class="bunko">
<th>文庫本</th><td>10</td><td>300</td>
</tr>
</tbody>
</table>
</body>
</html>

投稿日時 - 2008-06-28 09:25:52

お礼

steel_grayさん

わわわ!すごい!
こんな短時間でここまでなってしまうんですね!
色の指定はCSSを使うんですね。
何をどうしたらいいのか分からず、質問のような書き方になってしまいましたTT
ご教授いただけた内容は、とても勉強になりました。

お忙しいところ、本当にありがとうございました。

投稿日時 - 2008-06-28 10:45:38

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

・ テーブルにアクセスするには

rows[].cells[]

を使います。

・ TD1~TD7 の名前は付け直したほうがよいかもしれませんが、

TD20,TD21,TD22, ... 等

・ そのままで修正してみると、JavaScriptの最初の部分に

<script type="text/javascript">
------------------------------------------------------------
var TD1;
var TD2;
var TD3;
var TD4;
var TD5;
var TD6;
var TD7;

function $(id) {
return document.getElementById(id);
}

window.onload=function(){
var t = $('table1');
TD1 = t.rows[2].cells[0];
TD2 = t.rows[2].cells[1];
TD3 = t.rows[2].cells[2];
TD4 = t.rows[2].cells[3];
TD5 = t.rows[3].cells[0];
TD6 = t.rows[3].cells[1];
TD7 = t.rows[3].cells[2];
}

------------------------------------------------------------
を付け加えてみてください。

投稿日時 - 2008-06-27 22:09:42

補足

autyさん

教えていただいた内容をコピーして貼り付けてみたんですが、
なかなか動作してくれませんでした。
下記のような記述でよかったんでしょうか?


<script type="text/javascript">
var TD1;
var TD2;
var TD3;
var TD4;
var TD5;
var TD6;
var TD7;

function $(id) {
return document.getElementById(id);
}

window.onload=function(){
var t = $('table1');
TD1 = t.rows[2].cells[0];
TD2 = t.rows[2].cells[1];
TD3 = t.rows[2].cells[2];
TD4 = t.rows[2].cells[3];
TD5 = t.rows[3].cells[0];
TD6 = t.rows[3].cells[1];
TD7 = t.rows[3].cells[2];
}

function TDBC0() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD2.style.background='#FFFFCC';
TD3.style.background='#FFFFCC';
TD4.style.background='#FFFFCC';
TD5.style.background='#FFFFCC';
TD6.style.background='#FFFFCC';
TD7.style.background='#FFFFCC';
}

function TDBC0C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD2.style.background='#f1f1e0';
TD3.style.background='#ffffff';
TD4.style.background='#ffffff';
TD5.style.background='#f1f1e0';
TD6.style.background='#fafaf5';
TD7.style.background='#fafaf5';
}


//身体測定 体重

function TDBC1() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD2.style.background='#FFFFCC';
TD3.style.background='#FFFFCC';
TD4.style.background='#FFFFCC';
}
function TDBC1C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD2.style.background='#f1f1e0';
TD3.style.background='#ffffff';
TD4.style.background='#ffffff';
}

//身体測定 体重

function TDBC2() { //背景を設定
TD1.style.background='#FFFFCC';
TD1.style.background='#FFFFCC';
TD5.style.background='#FFFFCC';
TD6.style.background='#FFFFCC';
TD7.style.background='#FFFFCC';
}
function TDBC2C() { //背景を元に戻す
TD1.style.background='#f1f1e0';
TD5.style.background='#f1f1e0';
TD6.style.background='#fafaf5';
TD7.style.background='#fafaf5';
}
</script>

投稿日時 - 2008-06-28 12:35:22

お礼

autyさん

回答下さいましてありがとうございます!

まさかこんなにも早くに回答を頂けるなんて思っていませんでしたTT
テーブルにアクセスする場合にはこういう書き方をしたらいいんですね。
どうしたらいいのか分からず、右往左往していました。

お忙しいところ、ありがとうございました~^^

投稿日時 - 2008-06-28 10:32:53

あなたにオススメの質問