ホームページ > 記事 > ウェブフロントエンド > jqueryは即時変更を実現します
jqueryは即時変更を実現します
- 王林オリジナル
- 2023-05-23 13:43:07528ブラウズ
インターネットの発展に伴い、Web ページの対話性と応答性がますます注目を集めています。インライン編集機能もさまざまなWebサイトで広く使われています。クリックして変更とは、ページ上のコンテンツを直接編集する機能を指します。つまり、新しいページにジャンプしたり、編集するためにフォームを使用したりする必要はなく、マウスをクリックするだけでページ上のコンテンツを直接編集できます。 、非常に便利で速いです。
瞬時の変更を実現するプロセスにおいて、jQuery は非常に実用的なツールです。 jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡単に実行できるさまざまな関数を提供する、高速かつ簡潔な JavaScript ライブラリです。以下では、jQuery を使用してポイント アンド クリックによる変更を実現する方法を紹介します。
まず、サンプル ページを準備する必要があります。複数のテーブルを含むページがあり、それぞれに名前と年齢の値があるとします。ユーザーがこの情報をページ上で直接編集し、自動的にサーバーに保存できるようにしたいと考えています。以下は、サンプル ページの HTML ソース コードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>即点即改示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
th {
background-color: #eee;
}
td.editable {
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td class="editable" data-field="name" data-id="1">张三</td>
<td class="editable" data-field="age" data-id="1">25</td>
</tr>
<tr>
<td class="editable" data-field="name" data-id="2">李四</td>
<td class="editable" data-field="age" data-id="2">30</td>
</tr>
<tr>
<td class="editable" data-field="name" data-id="3">王五</td>
<td class="editable" data-field="age" data-id="3">35</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('td.editable').click(function() {
var value = $(this).text();
var field = $(this).data('field');
var id = $(this).data('id');
var input = $('<input type="text" />');
input.val(value);
$(this).empty().append(input);
input.focus();
input.blur(function() {
var new_value = $(this).val();
if (new_value != value) {
var data = {};
data[field] = new_value;
$.ajax({
method: 'POST',
url: '/update',
data: {
id: id,
data: JSON.stringify(data)
},
success: function(response) {
console.log('更新成功');
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(new_value);
},
error: function(response) {
alert('更新失败');
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
}
});
} else {
$('td.editable[data-id="' + id + '"][data-field="' + field + '"]').text(value);
}
});
});
});
</script>
</body>
</html> 上記の HTML ソース コードでは、jQuery ライブラリを使用し、いくつかのスタイルを定義しました。このうち、編集可能な各セルは editable クラスで設定され、フィールド名と行 ID は data-field 属性と data-id 属性を使用して保存されます。 。次に、jQuery の ready 関数を使用して、ページが読み込まれた後に各編集可能なセルのクリック イベントをバインドします。クリック イベントは、現在のセルの値、フィールド、行 ID を取得し、input 要素を作成し、現在の値を input 要素に割り当て、input# を置き換えます。 ## 要素は現在のセルに挿入され、ユーザーが編集できるようになります。編集が完了すると、input 要素はフォーカスを失い、新しい値を取得し、行 ID とフィールド名とともに JSON オブジェクトにパッケージ化し、AJAX 経由でサーバーに送信して保存できます。 。保存が成功した場合は元のセルの内容が更新され、そうでない場合は元の値に復元されます。
以上がjqueryは即時変更を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。