jqueryで現在の行を選択する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryで現在の行を選択する方法

PHPz

May 11, 2023 pm 10:31 PM

jQuery は、開発者が非常にインタラクティブで応答性の高い Web ページを簡単に作成できるようにする非常に人気のある JavaScript ライブラリです。 jQuery では、要素の選択は非常に一般的な操作であり、現在の行の選択 (現在の行の強調表示とも呼ばれます) は開発プロセス中の重要な要件です。この記事では、jQuery を使用して現在の行を選択し、スタイルを設定する方法を説明します。

1. 要件分析

Web 開発では、通常、テーブルを使用してデータを表示します。マウスをテーブルの行 (tr) に移動すると、その行が強調表示されて、現在選択されている行をユーザーに思い出させることができます。したがって、この要件を達成するには jQuery コードを作成する必要があります。

2. コードの実装

この要件を実現するプロセスでは、jQuery の on() メソッドと兄弟 () メソッドを使用して、現在の行を選択し、そこにスタイルを追加できます。具体的な実装手順は次のとおりです。

テーブルの各行 (tr) にマウスオーバーイベントをバインドします。マウスが特定の行に移動すると、イベントがトリガーされます。
```
$('table tr').on('mouseover', function() {
 // 鼠标滑过事件处理逻辑
});
```

イベント処理ロジックでは、兄弟要素() メソッドを使用して現在の行の兄弟要素を選択し、それらにスタイルを追加します。

$('table tr').on('mouseover', function() {
 $(this).siblings().removeClass('currentRow'); // 移除其他行的样式
 $(this).addClass('currentRow'); // 为当前行添加样式
});

CSS で .currentRow クラスを定義して、現在の行のスタイルを設定します。
```
.currentRow {
 background-color: #f0f0f0;
}
```

このコードの実装原則は、マウスを特定の行の上にスライドさせると、まず兄弟() メソッドを使用して現在の行の兄弟要素を選択することです。次に、removeClass() メソッドを使用して他の行の既存のスタイルを削除し、最後に addClass() メソッドを使用して現在の行にハイライトスタイルを追加します。

3. デモの例

次は、jQuery を使用して現在の行を選択し、そこにスタイルを追加する方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery选择当前行</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
        .currentRow {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
                <td>广州市天河区</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('table tr').on('mouseover', function() {
            $(this).siblings().removeClass('currentRow');
            $(this).addClass('currentRow');
        });
    </script>
</body>
</html>

上の例では、マウスロールオーバーイベントをテーブルの各行にバインドします。マウスが特定の行に移動したら、兄弟() メソッドを使用して現在の行の他の要素 (つまり、他の行 )、既存のスタイルを削除し、最後に現在の行にハイライトスタイルを追加します。

4. 概要

現在の行の選択は、Web 開発において非常に一般的な操作であり、jQuery を使用して簡単に実装できます。 on() メソッドと兄弟() メソッドを使用すると、現在の行を選択し、そこにスタイルを追加できます。同時に、現在の行にスタイルを追加するときは、スタイルを簡単に変更できるように、CSS で対応するスタイルクラスを定義することに注意する必要があります。

以上がjqueryで現在の行を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSS：同じDOMで複数のIDを使用できますか？May 14, 2025 am 12:20 AM

いいえ、あなたはusemultipleidsinthemedom.1）idsmustbeuniqueperhtmlspecification、およびusingdusing cansistent browserbehavior.2）useclassesses forstylingmultipleElements、acturtorectorectorectorsectorgettributeurutuureのuseclasses forstyling forstyling forstyling forstyling forstyling forstyling rassess for -destendertantertorectorsutortortortruture

HTML5の目的：より強力でアクセス可能なWebを作成するMay 14, 2025 am 12:18 AM

html5aimstoenhancewebcapability、makingmoredynamic、interactive、およびaccessible.1）itupportsmultimediaelementslikeand、排除、2）semanticelementionmentionmentionmentionimementsimementionimementsimementsimbrovecessibilityandcodereadability.3）

HTML5の重要な目標：Web開発とユーザーエクスペリエンスの向上May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelymentanduserexperiencetheTheTheTheTheTheTheTheTheTructure、multimedieingegration、およびperformanceImprovements.1）semanticelementslike like like ,, and and requrovedababilityandaccessibility.2）andTagsallowseamlessmultimediaemdiding withoutplugins.3）

HTML5：安全ですか？May 14, 2025 am 12:15 AM

html5isnotinherecureを使用しますが、featurescanleadtosecurityrisksifmisusedorimpremented.1）usetheSsandboxattribution controlembeddeddeddeddedentandPreventvulnerabilitieslikeclickjacking.2）

HTML5は、古いHTMLバージョンと比較して目標を達成しますMay 14, 2025 am 12:14 AM

html5aimedtoeenhancewebdevelopmentbyintroducingsmanticelements、nativemultimediasupport、改善、およびオフリンの実行可能性、対照、html.1）itintroductuedsemantictagslike、nattructurcturcurean desieand.2）

CSS：IDセレクターを使用するのは悪いですか？May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1）IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2）一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5：2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1）強化された拡張性と拡張効率化されたレンダリング.2）

HTML5が改善しようとした主な領域は何ですか？May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas：1）multimediasupport、2）セマンティクス構造、3）フォームキャピリティ、および4）offlineandstorageoptions.1）html5introduededelements、simplifiedediaembedingemencemanteddim.2）

See all articles