ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用して表形式データのオンライン編集を実装する

JavaScript を使用して表形式データのオンライン編集を実装する

WBOY
WBOYオリジナル
2023-06-15 20:53:042383ブラウズ

最新の Web アプリケーションでは、テーブルはデータの表示と編集に使用される一般的な UI コンポーネントです。場合によっては、ユーザーは、別のページに移動したり、外部ツールを使用して変更を加えたりすることなく、データをすばやく変更するためにテーブル内で直接編集する必要がある場合があります。したがって、オンラインテーブル編集機能を実装すると非常に便利です。この記事では、JavaScript といくつかのオープン ソース ライブラリを使用して表形式データのオンライン編集を実装する方法を紹介します。

1. HTML テーブルの作成

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>

2. 編集ボタンとイベント ハンドラーの追加

テーブルの編集可能な各セルに「編集」ボタンを追加し、ボタンをクリックすると編集モードが開始されます。その方法は次のとおりです:

<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();
    });
  });
});

このコードは、最初にすべての「編集」ボタンと編集可能なセルを検索します。グリッドを選択し、ボタンのクリック ハンドラーを起動します。ハンドラーでは、必要な要素 (値のテキスト ノード、エディター、およびセル) を検索し、編集モードを切り替え、エディターにフォーカスを設定します。ユーザーが編集を終了し、エディターがフォーカスを失うと、ハンドラーは変更をコミットし、更新された値をテキスト ノードに表示します。

3. 保存ボタンとキャンセル ボタンを追加する

編集モードでは、ユーザーは変更を保存またはキャンセルする方法が必要です。これを実現するには、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();
    });
  });
});

このコードは、最初にすべての [編集]、[保存]、および [キャンセル] ボタンを検索し、各 [編集] ボタンのクリック ハンドラーにイベント リスナーを追加します。ハンドラーでは、必要な要素 (値のテキスト ノード、エディター、保存ボタン、およびキャンセル ボタン) が検索され、編集モードが表示され、エディターにフォーカスが設定されます。ユーザーが保存ボタンをクリックすると、ハンドラーは変更をコミットし、更新された値をテキスト ノードに表示し、更新リクエストをサーバーに送信します。ユーザーがキャンセル ボタンをクリックすると、ハンドラーは変更をキャンセルし、初期値に戻します。

4. 結論

この記事では、JavaScript といくつかのオープン ソース ライブラリを使用して表形式データのオンライン編集を実装する方法を学びました。ユーザーが jQuery と Ajax を使用してテーブル内のデータを簡単に変更し、更新をサーバーに送信できるように、[編集] ボタンと [保存/キャンセル] ボタンを追加しました。これは、JavaScript と、そのライブラリを使用して Web アプリケーションのユーザー エクスペリエンスを向上させる方法を紹介する優れた例です。

以上がJavaScript を使用して表形式データのオンライン編集を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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