Utiliser JavaScript pour mettre en œuvre l'édition en ligne de données tabulaires

Dans les applications Web modernes, les tableaux sont un composant d'interface utilisateur courant utilisé pour afficher et modifier des données. Dans certains cas, les utilisateurs peuvent avoir besoin d'effectuer des modifications directement dans le tableau pour modifier rapidement les données sans avoir à accéder à une autre page ou à utiliser un outil externe pour apporter des modifications. Il est donc très utile d’implémenter des fonctions d’édition de tableaux en ligne. Dans cet article, je présenterai comment utiliser JavaScript et certaines bibliothèques open source pour mettre en œuvre l'édition en ligne de données tabulaires.

1. Création d'un tableau HTML

Avant de commencer à utiliser JavaScript, veuillez d'abord créer un tableau HTML. Voici un exemple simple :

<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. Ajoutez des boutons d'édition et des gestionnaires d'événements

Ajoutez un bouton "Modifier" à chaque cellule modifiable du tableau et démarrez le mode édition lorsque vous cliquez sur le bouton. Voici comment procéder :

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

Dans l'exemple suivant, je vais utiliser la bibliothèque jQuery pour rechercher et manipuler des éléments du 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();
    });
  });
});

Ce code trouve d'abord tous les boutons "éditer" et les cellules modifiables, et lance une seule action sur le bouton Gestionnaire de clics. Dans le gestionnaire, il trouve les éléments requis (le nœud de texte de la valeur, l'éditeur et la cellule), change de mode d'édition et met le focus sur l'éditeur. Lorsque l'utilisateur termine l'édition et que l'éditeur perd le focus, le gestionnaire valide les modifications, affichant la valeur mise à jour dans le nœud de texte.

3. Ajouter des boutons de sauvegarde et d'annulation

En mode édition, les utilisateurs doivent disposer d'un moyen d'enregistrer ou d'annuler les modifications. Nous pouvons ajouter deux boutons pour accomplir cela :

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

Veuillez noter que ces boutons doivent être inclus dans le mode d'édition de chaque cellule modifiable afin que l'utilisateur puisse enregistrer ou annuler les modifications apportées aux cellules individuelles si nécessaire. Voici comment procéder :

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

Semblable au bouton Modifier, nous devons ajouter des gestionnaires d'événements pour gérer les événements de clic pour les deux boutons et soumettre les données du formulaire au serveur. Voici comment procéder :

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

Ce code trouve d'abord tous les boutons Modifier, Enregistrer et Annuler et ajoute un écouteur d'événement dans le gestionnaire de clics de chaque bouton Modifier. Dans le gestionnaire, il trouve les éléments requis (le nœud de texte de la valeur, l'éditeur, le bouton Enregistrer et le bouton Annuler), affiche le mode d'édition et définit le focus sur l'éditeur. Lorsque l'utilisateur clique sur le bouton Enregistrer, le gestionnaire valide les modifications, affiche la valeur mise à jour dans le nœud de texte et envoie une demande de mise à jour au serveur. Lorsque l'utilisateur clique sur le bouton Annuler, le gestionnaire annule la modification et restaure la valeur initiale.

4. Conclusion

Dans cet article, nous avons appris à utiliser JavaScript et certaines bibliothèques open source pour mettre en œuvre l'édition en ligne de données tabulaires. Nous avons ajouté un bouton Modifier et un bouton Enregistrer/Annuler pour permettre aux utilisateurs de modifier facilement les données du tableau et de soumettre des mises à jour au serveur à l'aide de jQuery et Ajax. Il s'agit d'un excellent exemple pour présenter JavaScript et comment vous pouvez améliorer l'expérience utilisateur de votre application Web en utilisant ses bibliothèques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!