HTMLでカーソルを合わせたtableの色を変化させた後戻したい

前提・実現したいこと

HTMLのテーブルにカーソルを合わせた際に色を変化させ、別な行にカーソルが合った際には白に戻したいのですが、
戻らなくなってしまいました。

また、if文の中にあるdocument.getElementById("table"+idName)は
document.getElementById("table"+i)でも動作はしましたが、「.style.backgroundColor = ~」の部分でエラー(Uncaught TypeError: Cannot read property 'style' of null at myfunc1 (mario_bros.js:9) at HTMLTableRowElement.onmouseover (member.html:15)
)が出たので
("table"+idName)の表記になっています。
この違いもよくわからないので解説いただけますと幸いです。

一応、前回の内容の続きとなっています。

HTML
1
2ファイル名　member.html
3
4<!DOCTYPE html>
5<html lang=ja>
6
7<head>
8    <title>ログイン画面へようこそ</title>
9</head>
10<body>
11    <p>ログインするユーザを選択して下さい。</p>
12    <table border=1 id="a">
13        <tr>
14            <th>番号</th>
15            <th>名前</th>
16            <th>性別</th>
17        </tr>
18        <tr id="table1" onmouseover="myfunc1(1)" onclick="myfunc2(1)">
19            <td>1</td>
20            <td>マリオ</td>
21            <td>男</td>
22        </tr>
23        <tr id="table2" onmouseover="myfunc1(2)" onclick="myfunc2(2)">
24            <td>2</td>
25            <td>ルイージ</td>
26            <td>男</td>
27        </tr>
28        <tr id="table3" onmouseover="myfunc1(3)" onclick="myfunc2(3)">
29            <td>3</td>
30            <td>ヨッシー</td>
31            <td>不明</td>
32        </tr>
33        <tr id="table4" onmouseover="myfunc1(4)" onclick="myfunc2(4)">
34            <td>4</td>
35            <td>ピーチ</td>
36            <td>女</td>
37        </tr>
38        <tr id="table5" onmouseover="myfunc1(5)" onclick="myfunc2(5)">
39            <td>5</td>
40            <td>ワリオ</td>
41            <td>男</td>
42        </tr>
43        <tr id="table6" onmouseover="myfunc1(6)" onclick="myfunc2(6)">
44            <td>6</td>
45            <td>ワルイージ</td>
46            <td>男</td>
47        </tr>
48        <tr id="table7" onmouseover="myfunc1(7)" onclick="myfunc2(7)">
49            <td>7</td>
50            <td>クッパ</td>
51            <td>男</td>
52        </tr>
53        <tr id="table8" onmouseover="myfunc1(8)" onclick="myfunc2(8)">
54            <td>8</td>
55            <td>デイジー</td>
56            <td>女</td>
57        </tr>
58    </table>
59    <form name="form">
60        <p><label>選択したユーザ：<input type="text" name="bread" value=""></label></p>
61        <p><label>パスワード　　：<input type="text" value=""></label></p>
62        <p><input type="button" value="ログイン" onclick="myfunc3()"></p>
63    </form>
64    <script src="mario_bros2.js"></script>
65</body>
66</html>

JavaScript
1ファイル名　mario_bros2.js
2
3function myfunc1(idName){　
4 for(var i=1; i<=20; i++ ){
5       if(document.getElementById("table"+idName)　==　null){ //もし要素が存在しなかったら
6           break;　//処理をやめる
7       }else{
8        document.getElementById("table"+idName).style.backgroundColor = "#fff";
9       };
10   } 
11  document.getElementById("table"+idName).style.backgroundColor="#cc99ff";
12}
13
14function myfunc2(idName){　
15    for(var i=1; i<=20; i++ ){
16          if(document.getElementById("table"+idName)　==　null){ 
17              break;　
18          }else{
19           document.getElementById("table"+idName).style.backgroundColor = "#fff";
20          };
21      } ;
22      document.getElementById("table"+idName).style.backgroundColor="#cc99ff";
23      var objTable = document.getElementById("a");
24      var a= objTable.rows[idName].cells[1];
25      var htmltd = a.innerHTML;
26     form.bread.value=htmltd; 
27};

行動規範の内容に同意します

回答3件

CSSの:hoverで良いのでは。

投稿2019/07/10 05:12

m.ts10806

総合スコア80850

CSS
1<style>
2#a tbody tr:hover{background-Color:red}
3</style>
4<table border=1 id="a">
5    <thead>
6       <tr>
7            <th>番号</th>
8            <th>名前</th>
9            <th>性別</th>
10        </tr>
11    </thead>
12    <tbody>
13        <tr>
14            <td>1</td>
15            <td>マリオ</td>
16            <td>男</td>
17        </tr>
18        <tr>
19            <td>2</td>
20            <td>ルイージ</td>
21            <td>男</td>
22        </tr>
23        <tr>
24            <td>3</td>
25            <td>ヨッシー</td>
26            <td>不明</td>
27        </tr>
28        <tr>
29            <td>4</td>
30            <td>ピーチ</td>
31            <td>女</td>
32        </tr>
33        <tr>
34            <td>5</td>
35            <td>ワリオ</td>
36            <td>男</td>
37        </tr>
38        <tr>
39            <td>6</td>
40            <td>ワルイージ</td>
41            <td>男</td>
42        </tr>
43        <tr>
44            <td>7</td>
45            <td>クッパ</td>
46            <td>男</td>
47        </tr>
48        <tr>
49            <td>8</td>
50            <td>デイジー</td>
51            <td>女</td>
52        </tr>
53    </tbody>
54    </table>

投稿2019/07/10 05:21

編集2019/07/10 05:22

yambejp

総合スコア114843

自己解決

HTML
1<!DOCTYPE html>
2<html lang=ja>
3
4<head>
5    <title>ログイン画面へようこそ</title>
6</head>
7<body>
8    <p>ログインするユーザを選択して下さい。</p>
9    <table border=1 id="a">
10        <tr>
11            <th>番号</th>
12            <th>名前</th>
13            <th>性別</th>
14        </tr>
15        <tr id="table1" onmouseover="myfunc1('table1')" onclick="myfunc2(1)">
16            <td>1</td>
17            <td>マリオ</td>
18            <td>男</td>
19        </tr>
20        <tr id="table2" onmouseover="myfunc1('table2')" onclick="myfunc2(2)">
21            <td>2</td>
22            <td>ルイージ</td>
23            <td>男</td>
24        </tr>
25        <tr id="table3" onmouseover="myfunc1('table3')" onclick="myfunc2(3)">
26            <td>3</td>
27            <td>ヨッシー</td>
28            <td>不明</td>
29        </tr>
30        <tr id="table4" onmouseover="myfunc1('table4')" onclick="myfunc2(4)">
31            <td>4</td>
32            <td>ピーチ</td>
33            <td>女</td>
34        </tr>
35        <tr id="table5" onmouseover="myfunc1('table5')" onclick="myfunc2(5)">
36            <td>5</td>
37            <td>ワリオ</td>
38            <td>男</td>
39        </tr>
40        <tr id="table6" onmouseover="myfunc1('table6')" onclick="myfunc2(6)">
41            <td>6</td>
42            <td>ワルイージ</td>
43            <td>男</td>
44        </tr>
45        <tr id="table7" onmouseover="myfunc1('table7')" onclick="myfunc2(7)">
46            <td>7</td>
47            <td>クッパ</td>
48            <td>男</td>
49        </tr>
50        <tr id="table8" onmouseover="myfunc1('table8')" onclick="myfunc2(8)">
51            <td>8</td>
52            <td>デイジー</td>
53            <td>女</td>
54        </tr>
55    </table>
56    <form name="form">
57        <p><label>選択したユーザ：<input type="text" name="bread" value=""></label></p>
58        <p><label>パスワード　　：<input type="text" value=""></label></p>
59        <p><input type="button" value="ログイン" onclick="myfunc3()"></p>
60    </form>
61    <script src="mario_bros2.js"></script>
62</body>
63
64</html>

①myfunc関数に渡す際の引数を文字列として渡す。

JavaScript
1function myfunc1(row){　//myfunc1はセルの背景を白に戻すということを行う関数
2 for(var i=1; i<=20; i++ ){
3       if(document.getElementById("table"+i)　==　null){ //もし要素が存在しなかったら
4           break;　//処理をやめる
5       }else{
6        document.getElementById("table"+i).style.backgroundColor = "#fff";
7       };
8   } 
9  document.getElementById(row).style.backgroundColor="#cc99ff";
10}
11
12function myfunc2(idName){　
13    for(var i=1; i<=20; i++ ){
14          if(document.getElementById("table"+idName)　==　null){ 
15              break;　
16          }else{
17           document.getElementById("table"+idName).style.backgroundColor = "#fff";
18          };
19      } ;
20      document.getElementById("table"+idName).style.backgroundColor="#cc99ff";
21      var objTable = document.getElementById("a");
22      var a= objTable.rows[idName].cells[1];
23      var htmltd = a.innerHTML;
24     form.bread.value=htmltd; 
25};
26