ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで現在の行を選択する方法
jqueryで現在の行を選択する方法
- PHPzオリジナル
- 2023-05-11 22:31:36671ブラウズ
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 サイトの他の関連記事を参照してください。