記事詳細

投稿日

2026年10月24日20時15分

タイトル

ASP.NET Core MVC:　<table class="table">(bootstrap table)の場合 <tr class="payment-row" data-inout="@item.InOut"　の@item.InOut=trueの行をjqueryで、行の背景色をオレンジにする方法をjqueryで教えてください。@item.InOut=trueの場合の表示は”入金”にしています。

内容

了解です。
前回のコードをさらに改良して、背景色をCSSアニメーション付きで変更し、
視覚的にわかりやすくするバージョンにします。

アニメーション付き改良版コード例

Html
<!-- Bootstrapテーブル -->
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>種別</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr class="payment-row" data-inout="@item.InOut">
                <td>@(item.InOut ? "入金" : "出金")</td>
                <td>@item.Amount</td>
            </tr>
        }
    </tbody>
</table>

<!-- jQueryスクリプト -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        // 入金行（true）をオレンジに
        $('.payment-row[data-inout="true"]').addClass('highlight-orange');

        // 出金行（false）を水色に
        $('.payment-row[data-inout="false"]').addClass('highlight-blue');
    });
</script>

<!-- CSS -->
<style>
    /* 背景色変更にアニメーションを追加 */
    .highlight-orange {
        background-color: orange !important;
        transition: background-color 0.5s ease;
    }
    .highlight-blue {
        background-color: lightblue !important;
        transition: background-color 0.5s ease;
    }

    /* hover時に色を濃くする */
    .highlight-orange:hover {
        background-color: darkorange !important;
    }
    .highlight-blue:hover {
        background-color: deepskyblue !important;
    }
</style>

改良ポイント

CSSアニメーション追加
transition を使い、背景色がスムーズに変わるようにしました。
hover時の強調表示
マウスオーバーで色を濃くして、行がより目立つようにしました。
Bootstrapとの併用
.table-striped と .table-bordered を追加し、見た目を整えつつ色を上書き。

このバージョンなら、ユーザーがマウスで行を選択したときに視覚的なフィードバックがあり、
入金・出金の区別もより直感的にわかります。

💡 次は、クリック時に選択状態を保持する機能も追加できますが、
それも実装しますか？

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧