電子書籍の厳選無料作品が豊富！

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

解決済

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

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

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

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

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

よろしくお願いします。


以下、ソースです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

ちょっと汎用性に欠けるけど、


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

steel_grayさん

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

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

通報する
お礼日時：2008/06/28 10:45

No.1

  • 回答者： auty
  • 回答日時：

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



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];
}

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

この回答への補足

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
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

autyさん

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

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

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

通報する
お礼日時：2008/06/28 10:32

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報