table：クリック時とマウスオーバー時で背景色を変更したい

前提・実現したいこと

やりたいことは、以下2つです。
①テーブル行をクリックした時に背景色を変更したい
②マウスオーバーした時に背景色を変更したい
※①、②の背景色は別です。（例：①⇒赤色、②⇒青色）

例えばテーブル行(1行)をクリックした場合、①の背景色に変更されていると思うのですが、マウスアウト・マウスオーバーしても②の背景色に変更しない仕様にしたいです。

発生している問題・エラーメッセージ

現状、クリックした行の背景色の変更まではできています。
これにたいして、マウスオーバーの処理を加えようとすると上手くいきません。

aspx
1<asp:Panel ID="Pnl_tabledata" runat="server" ClientIDMode="Static" ></asp:Panel>

HTML
1<div id="Pnl_tabledata"></div>

css
1#tbl_data {
2    width:502px;
3    height:35px;
4}
5
6#tbl_data:hover
7{
8    cursor:pointer;
9    background-color:#e0ffff;
10}

javascript
1$(function () {
2　　//テーブル表示
3　　Scr_tableData();
4
5    //背景色変更
6    tr_default(".data-href");
7    $(".data-href td").click(function () {
8        tr_default(".data-href");
9        tr_click($(this));
10    });
11});
12
13//テーブル作成
14function Scr_tableData() {
15    var panel = $("#Pnl_tabledata");
16    var array = ["Apple", "Orange", "Grape"];
17    var base = $('<table class="list_tbl">');
18    //取得内容をｾｯﾄ
19    $.each(array, function (index,val) {
20        var htmlstr = ''
21        htmlstr = htmlstr
22                + '     <tr class="data-href">'
23                + '         <td class="data-href" id=tbl_data>' + val + '</td>'
24                + '      </tr>'
25        base.append(htmlstr);
26    });
27    panel.append(base);
28}
29
30//背景色変更
31function tr_default(tblID) {
32    var vTR = tblID + " td";
33    $(vTR).css("background-color", "#ffffff");
34    $(vTR).mouseout(function () {
35        $(this).css("background-color", "#ffffff")
36    });
37}
38
39function tr_click(trID) {
40    trID.css("background-color", "#00bfff");
41    trID.mouseout(function () {
42        trID.css("background-color", "#00bfff")
43    });
44}
45

上記を実行した場合(矢印はマウスポインターです)
初期表示の段階ではCSSのhoverで背景色が変更できていると思われます。

テーブル行をクリックしたときの背景色の変更はできています。

しかし一回でもテーブル行をクリックしてしまうとcssのhoverが効かなくなってしまいます。図以外の行(Grape)にカーソルを持っていっても同様です。

この時、再びクリックした行(Apple)にカーソルを持って行ったときに背景色を変更しないようにしたいです。

補足情報（FW/ツールのバージョンなど）

https://lilia-study.com/web/jquery/sample/tr_background_color.html

こちらのURLを参考に少し変更を加えて記述しました。
こちらのサイトの場合、クリックした行もマウスを置くと背景色が変わっています。これを変わらない仕様にしたいです。

宜しくお願いします。

追記：Microsoft Visual Studio 2010
.NET Framework 4
ASP.Net Web Forms

Itta

2020/11/02 07:49

HTMLのコードも記述していただけますか？

Umashio

2020/11/02 07:52

追加致しました！

m.ts10806

2020/11/02 08:03

>asp: このコードでJavaScript,jQueryのタグだけだと回答付かないと思います。前提がASPなのであればそのタグが必要ですし、そうでないなら、コンパイル後のHTMLか、モックHTMLを提示すべきです。

Umashio

2020/11/02 08:14

m.ts10806さんご指摘ありがとうございます。 ASP.NETのタグと環境の追記をしました。

退会済みユーザー

2020/11/02 08:50

参考にしている記事は url の文字列を記載するだけでなくリンクを張ってください。 html と aspx は違うと認識してないようですが、今の質問の情報では誰も何も分かりませんよ。ASP.NET Web Forms を知っているものでも分かりません。よく考えて情報を提供してください。

退会済みユーザー

2020/11/03 04:54

Itta さん、m.ts10806 さん＞ ASP.NET の Panel コントロールは html に変換されると div 要素になります。質問者さんのコードの例では以下の通りです。 <div id="Pnl_tabledata">

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

回答1件

ベストアンサー

aspx ページに Panel コントロールを配置して CSS とスクリプトを追加しただけで、サーバー側のコードでの処理は一切してない・必要ないという条件で、以下のコードのようにすれば望むようになると思います。

以下のコードは、ページを新規に作成してから、それに質問者さんのコードをコピペし、もう一つ Panel コントロール、

<asp:Panel ID="Pnl_tabledata2" runat="server" ClientIDMode="Static" ></asp:Panel>

を追加して、それを操作する改善案（スクリプト＆CSS）を加えています。比較してみてください。（aspx.cs ページは中身が空の Page_Load メソッドのみなので省略）

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="WebForm12.aspx.cs" 
    Inherits="WebApplication1.WebForm12" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*質問者さんの CSS*/
        #tbl_data 
        {
            width:502px;
            height:35px;
        }

        #tbl_data:hover
        {
            cursor:pointer;
            background-color:#e0ffff;
        }

        /* ===== 改善案（ダブった id を使わない）=====*/
        .item 
        {
            width:502px;
            height:35px;
        }

        .item:hover
        {
            cursor:pointer;
            background-color:#e0ffff;
        }
    </style>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        //<![CDATA[

        // 質問者さんのスクリプト
        $(function () {
            //テーブル表示
            Scr_tableData();

            //背景色変更
            tr_default(".data-href");
            $(".data-href td").click(function () {
                tr_default(".data-href");
                tr_click($(this));
            });
        });

        //テーブル作成
        function Scr_tableData() {
            var panel = $("#Pnl_tabledata");
            var array = ["Apple", "Orange", "Grape"];
            var base = $('<table class="list_tbl">');
            //取得内容をｾｯﾄ
            $.each(array, function (index, val) {
                var htmlstr = ''
                htmlstr = htmlstr
                    + '     <tr class="data-href">'
                    + '         <td class="data-href" id=tbl_data>' + val + '</td>'
                    + '      </tr>'
                base.append(htmlstr);
            });
            panel.append(base);
        }

        //背景色変更
        function tr_default(tblID) {
            var vTR = tblID + " td";
            $(vTR).css("background-color", "#ffffff");
            $(vTR).mouseout(function () {
                $(this).css("background-color", "#ffffff")
            });
        }

        function tr_click(trID) {
            trID.css("background-color", "#00bfff");
            trID.mouseout(function () {
                trID.css("background-color", "#00bfff")
            });
        }

        // =========== 以下は改善案 ===========
        $(function () {
            Scr_tableData2();

            $(".data-href2 .item").on("click", function () {
                $(".data-href2 .item").css("background-color", "");
                $(this).css("background-color", "#00bfff");
            });
        });

        function Scr_tableData2() {
            var panel = $("#Pnl_tabledata2");
            var array = ["Apple", "Orange", "Grape"];
            var base = $('<table class="list_tbl">');
            $.each(array, function (index, val) {
                var htmlstr = ''
                htmlstr = htmlstr
                    + '     <tr class="data-href2">'
                    + '         <td class="data-href2 item">' + val + '</td>'
                    + '      </tr>'
                base.append(htmlstr);
            });
            panel.append(base);
        }
        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h1>質問者さんの Panel</h1>
        <p> hover の background-color は無視される</p>
        <asp:Panel ID="Pnl_tabledata" runat="server" ClientIDMode="Static" ></asp:Panel>

        <h1>改善案</h1>
        <asp:Panel ID="Pnl_tabledata2" runat="server" ClientIDMode="Static" ></asp:Panel>
    </form>
</body>
</html>

上のコードの実行結果は以下の通り。