Verwendung von JavaScript zur Implementierung der Online-Bearbeitung tabellarischer Daten

In modernen Webanwendungen sind Tabellen eine häufige UI-Komponente, die zum Anzeigen und Bearbeiten von Daten verwendet wird. In einigen Fällen müssen Benutzer möglicherweise direkt in der Tabelle Änderungen vornehmen, um Daten schnell zu ändern, ohne zu einer anderen Seite gehen oder ein externes Tool verwenden zu müssen, um Änderungen vorzunehmen. Daher ist es sehr nützlich, Funktionen zur Online-Tabellenbearbeitung zu implementieren. In diesem Artikel werde ich vorstellen, wie man JavaScript und einige Open-Source-Bibliotheken verwendet, um die Online-Bearbeitung von Tabellendaten zu implementieren.

1. HTML-Tabellenerstellung

Bevor Sie mit der Verwendung von JavaScript beginnen, erstellen Sie bitte zunächst eine HTML-Tabelle. Hier ist ein einfaches Beispiel:

<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. Bearbeitungsschaltflächen und Ereignishandler hinzufügen

Fügen Sie jeder bearbeitbaren Zelle der Tabelle eine Schaltfläche „Bearbeiten“ hinzu und starten Sie den Bearbeitungsmodus, wenn auf die Schaltfläche geklickt wird. So geht's:

<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>

Im folgenden Beispiel verwende ich die jQuery-Bibliothek, um DOM-Elemente zu finden und zu bearbeiten:

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

Dieser Code findet zunächst alle „Bearbeiten“-Schaltflächen und bearbeitbaren Zellen und startet eine einzelne Aktion die Schaltfläche Klicken Sie auf den Handler. Im Handler findet es die erforderlichen Elemente (den Textknoten des Werts, den Editor und die Zelle), wechselt den Bearbeitungsmodus und setzt den Fokus auf den Editor. Wenn der Benutzer mit der Bearbeitung fertig ist und der Editor den Fokus verliert, übernimmt der Handler die Änderungen und zeigt den aktualisierten Wert im Textknoten an.

3. Schaltflächen zum Speichern und Abbrechen hinzufügen

Im Bearbeitungsmodus müssen Benutzer eine Möglichkeit haben, Änderungen zu speichern oder abzubrechen. Um dies zu erreichen, können wir zwei Schaltflächen hinzufügen:

<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>

Bitte beachten Sie, dass diese Schaltflächen im Bearbeitungsmodus jeder bearbeitbaren Zelle enthalten sein sollten, damit der Benutzer bei Bedarf Änderungen an einzelnen Zellen speichern oder abbrechen kann. So geht's:

<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>

Ähnlich wie bei der Schaltfläche „Bearbeiten“ müssen wir Ereignishandler hinzufügen, um Klickereignisse für beide Schaltflächen zu verarbeiten und die Formulardaten an den Server zu senden. So geht's:

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

Dieser Code beginnt mit der Suche nach allen Schaltflächen „Bearbeiten“, „Speichern“ und „Abbrechen“ und dem Hinzufügen eines Ereignis-Listeners im Click-Handler jeder Schaltfläche „Bearbeiten“. Im Handler werden die erforderlichen Elemente gefunden (der Textknoten des Werts, der Editor, die Schaltfläche „Speichern“ und die Schaltfläche „Abbrechen“), der Bearbeitungsmodus angezeigt und der Fokus auf den Editor gesetzt. Wenn der Benutzer auf die Schaltfläche „Speichern“ klickt, übernimmt der Handler die Änderungen, zeigt den aktualisierten Wert im Textknoten an und sendet eine Aktualisierungsanforderung an den Server. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, bricht der Handler die Änderung ab und stellt den Anfangswert wieder her.

4. Fazit

In diesem Artikel haben wir gelernt, wie man JavaScript und einige Open-Source-Bibliotheken verwendet, um die Online-Bearbeitung von Tabellendaten zu implementieren. Wir haben eine Schaltfläche „Bearbeiten“ und eine Schaltfläche „Speichern/Abbrechen“ hinzugefügt, damit Benutzer Daten in der Tabelle einfach ändern und Aktualisierungen mithilfe von jQuery und Ajax an den Server senden können. Dies ist ein großartiges Beispiel, um JavaScript zu demonstrieren und wie Sie die Benutzererfahrung Ihrer Webanwendung durch die Verwendung seiner Bibliotheken verbessern können.

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript zur Implementierung der Online-Bearbeitung tabellarischer Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!