最新の Web アプリケーションでは、テーブルはデータの表示と編集に使用される一般的な UI コンポーネントです。場合によっては、ユーザーは、別のページに移動したり、外部ツールを使用して変更を加えたりすることなく、データをすばやく変更するためにテーブル内で直接編集する必要がある場合があります。したがって、オンラインテーブル編集機能を実装すると非常に便利です。この記事では、JavaScript といくつかのオープン ソース ライブラリを使用して表形式データのオンライン編集を実装する方法を紹介します。
JavaScript を使用する前に、まず HTML テーブルを作成してください。簡単な例を次に示します:
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>1.99</td>
<td>100</td>
</tr>
<tr>
<td>橙子</td>
<td>0.99</td>
<td>50</td>
</tr>
</tbody>
</table>テーブルの編集可能な各セルに「編集」ボタンを追加し、ボタンをクリックすると編集モードが開始されます。その方法は次のとおりです:
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="editable-cell">
<span class="value">苹果</span>
<input type="text" class="editor" value="苹果">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">1.99</span>
<input type="text" class="editor" value="1.99">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">100</span>
<input type="number" class="editor" value="100">
<button class="edit-btn">编辑</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="editable-cell">
<span class="value">橙子</span>
<input type="text" class="editor" value="橙子">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">0.99</span>
<input type="text" class="editor" value="0.99">
<button class="edit-btn">编辑</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">50</span>
<input type="number" class="editor" value="50">
<button class="edit-btn">编辑</button>
</div>
</td>
</tr>
</tbody>
</table>次の例では、jQuery ライブラリを使用して DOM 要素を検索して処理します:
$(document).ready(function() {
// 查找所有编辑按钮和可编辑单元格
var editBtns = $('.edit-btn');
var cells = $('.editable-cell');
// 添加事件处理程序
editBtns.click(function() {
var cell = $(this).closest('.editable-cell');
var valueSpan = cell.find('.value');
var editor = cell.find('.editor');
// 切换编辑模式
valueSpan.hide();
editor.show().focus();
// 提交修改
editor.blur(function() {
valueSpan.text(editor.val());
editor.hide();
valueSpan.show();
});
});
});このコードは、最初にすべての「編集」ボタンと編集可能なセルを検索します。グリッドを選択し、ボタンのクリック ハンドラーを起動します。ハンドラーでは、必要な要素 (値のテキスト ノード、エディター、およびセル) を検索し、編集モードを切り替え、エディターにフォーカスを設定します。ユーザーが編集を終了し、エディターがフォーカスを失うと、ハンドラーは変更をコミットし、更新された値をテキスト ノードに表示します。
編集モードでは、ユーザーは変更を保存またはキャンセルする方法が必要です。これを実現するには、2 つのボタンを追加します:
<button class="save-btn">保存</button> <button class="cancel-btn">取消</button>
ユーザーが必要に応じて個々のセルを保存またはキャンセルできるように、これらのボタンを編集可能な各セルの編集モードに含める必要があることに注意してください。その方法は次のとおりです。
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="editable-cell">
<span class="value">苹果</span>
<input type="text" class="editor" value="苹果">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">1.99</span>
<input type="text" class="editor" value="1.99">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">100</span>
<input type="number" class="editor" value="100">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="editable-cell">
<span class="value">橙子</span>
<input type="text" class="editor" value="橙子">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">0.99</span>
<input type="text" class="editor" value="0.99">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
<td>
<div class="editable-cell">
<span class="value">50</span>
<input type="number" class="editor" value="50">
<button class="edit-btn">编辑</button>
<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>
</div>
</td>
</tr>
</tbody>
</table>「編集」ボタンと同様に、これら 2 つのボタンのクリック イベントを処理し、フォーム データをサーバーに送信するイベント ハンドラーを追加する必要があります。その方法は次のとおりです。
$(document).ready(function() {
// 查找所有编辑按钮、保存按钮和取消按钮
var editBtns = $('.edit-btn');
var saveBtns = $('.save-btn');
var cancelBtns = $('.cancel-btn');
// 添加事件处理程序
editBtns.click(function() {
var cell = $(this).closest('.editable-cell');
var valueSpan = cell.find('.value');
var editor = cell.find('.editor');
var saveBtn = cell.find('.save-btn');
var cancelBtn = cell.find('.cancel-btn');
// 切换编辑模式
valueSpan.hide();
editor.show().focus();
saveBtn.show();
cancelBtn.show();
// 提交修改
saveBtn.click(function() {
valueSpan.text(editor.val());
editor.hide();
valueSpan.show();
saveBtn.hide();
cancelBtn.hide();
// 向服务器提交表格数据
var rowData = {
name: cell.closest('tr').find('td').eq(0).text(),
price: cell.closest('tr').find('td').eq(1).text(),
stock: cell.closest('tr').find('td').eq(2).text()
};
$.ajax({
url: '/api/updateRow',
method: 'POST',
data: rowData,
success: function(response) {
console.log('行更新成功');
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
// 取消修改
cancelBtn.click(function() {
editor.val(valueSpan.text());
editor.hide();
valueSpan.show();
saveBtn.hide();
cancelBtn.hide();
});
});
});このコードは、最初にすべての [編集]、[保存]、および [キャンセル] ボタンを検索し、各 [編集] ボタンのクリック ハンドラーにイベント リスナーを追加します。ハンドラーでは、必要な要素 (値のテキスト ノード、エディター、保存ボタン、およびキャンセル ボタン) が検索され、編集モードが表示され、エディターにフォーカスが設定されます。ユーザーが保存ボタンをクリックすると、ハンドラーは変更をコミットし、更新された値をテキスト ノードに表示し、更新リクエストをサーバーに送信します。ユーザーがキャンセル ボタンをクリックすると、ハンドラーは変更をキャンセルし、初期値に戻します。
この記事では、JavaScript といくつかのオープン ソース ライブラリを使用して表形式データのオンライン編集を実装する方法を学びました。ユーザーが jQuery と Ajax を使用してテーブル内のデータを簡単に変更し、更新をサーバーに送信できるように、[編集] ボタンと [保存/キャンセル] ボタンを追加しました。これは、JavaScript と、そのライブラリを使用して Web アプリケーションのユーザー エクスペリエンスを向上させる方法を紹介する優れた例です。
以上がJavaScript を使用して表形式データのオンライン編集を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
