ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して表形式データのオンライン編集を実装する
最新の 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 サイトの他の関連記事を参照してください。