![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
皆さんこんばんわ。
いつも利用させてもらっています。
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-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>
No.2ベストアンサー
- 回答日時:
ちょっと汎用性に欠けるけど、
色の指定は全て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>
steel_grayさん
わわわ!すごい!
こんな短時間でここまでなってしまうんですね!
色の指定はCSSを使うんですね。
何をどうしたらいいのか分からず、質問のような書き方になってしまいましたTT
ご教授いただけた内容は、とても勉強になりました。
お忙しいところ、本当にありがとうございました。
No.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];
}
------------------------------------------------------------
を付け加えてみてください。
この回答への補足
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>
autyさん
回答下さいましてありがとうございます!
まさかこんなにも早くに回答を頂けるなんて思っていませんでしたTT
テーブルにアクセスする場合にはこういう書き方をしたらいいんですね。
どうしたらいいのか分からず、右往左往していました。
お忙しいところ、ありがとうございました~^^
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
JavaScriptで特定のtdタグにcla...
-
【JQuery】テーブルで行選択さ...
-
プルダウンで選択すると、DBの...
-
tableの任意行にfocusをあてる
-
「オブジェクトは、このプロパ...
-
至急!GetElementById でtdの...
-
テーブルの項目の値取得
-
jQueryでクリックされたテーブ...
-
[Javascript]セル内の文字列の...
-
ハイパーリンクを別ウインドウ...
-
EasyUIのSubGrid(jquery)にお...
-
\\u30ad\\u30fc\\u30dc・・・と...
-
domでの削除
-
iframeの内のTable(rowspan有り...
-
特定の文字列を挿入
-
テーブルでのハイライト表示に...
-
エクセル VBA にて IE のボ...
-
jspのエラー
-
JSで、テーブルのある行のみ、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報