jQuery – 行内编辑表格行

在本文中，我们将介绍如何使用jQuery实现行内编辑表格行的功能。

阅读更多：jQuery 教程

介绍

行内编辑是指在表格中直接编辑每一行的内容，而无需跳转到其他页面或弹出对话框。通过行内编辑，用户可以方便地修改表格中的数据，并即时保存修改结果。

原理

行内编辑的原理是通过jQuery来监听用户的操作事件，并将编辑的数据实时更新到前端页面上，再通过Ajax或其他方式将修改后的数据保存到后端数据库中。

实现步骤

下面我们将详细介绍如何使用jQuery来实现行内编辑表格行的功能。

步骤1：创建表格

首先，我们需要在页面上创建一个表格来展示需要编辑的数据。可以使用HTML的<table>标签来创建一个基本的表格结构。

<table id="editableTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

步骤2：加载数据

接下来，我们需要通过Ajax或其他方式从后端获取数据，并将数据填充到表格中。可以使用jQuery的.append()方法来动态添加行和单元格。

$.ajax({
  url: 'example.com/getData',
  success: function(data) {
    var tableBody = $('#editableTable tbody');
    data.forEach(function(item) {
      var row = $('<tr>');
      row.append($('<td>').text(item.name));
      row.append($('<td>').text(item.age));
      row.append($('<td>').text(item.gender));
      row.append($('<td>').html('<button class="editBtn">编辑</button>'));
      tableBody.append(row);
    });
  }
});

步骤3：行内编辑

为了实现行内编辑的功能，我们需要监听编辑按钮的点击事件，并将对应行的数据替换为输入框或其他可编辑的元素。在用户完成编辑后，再将修改后的数据保存到数据库中。

$(document).on('click', '.editBtn', function() {
  var row = $(this).closest('tr');
  var name = row.find('td:eq(0)').text();
  var age = row.find('td:eq(1)').text();
  var gender = row.find('td:eq(2)').text();

  row.find('td:eq(0)').html('<input type="text" class="editName" value="' + name + '">');
  row.find('td:eq(1)').html('<input type="number" class="editAge" value="' + age + '">');
  row.find('td:eq(2)').html('<select class="editGender"><option value="男">男</option><option value="女">女</option></select>');
  row.find('td:eq(3)').html('<button class="saveBtn">保存</button> <button class="cancelBtn">取消</button>');
});

$(document).on('click', '.saveBtn', function() {
  var row = $(this).closest('tr');
  var name = row.find('.editName').val();
  var age = row.find('.editAge').val();
  var gender = row.find('.editGender').val();

  // 保存数据到数据库

  // 更新表格中的数据
  row.find('td:eq(0)').text(name);
  row.find('td:eq(1)').text(age);
  row.find('td:eq(2)').text(gender);
  row.find('td:eq(3)').html('<button class="editBtn">编辑</button>');
});

$(document).on('click', '.cancelBtn', function() {
  var row = $(this).closest('tr');
  var name = row.find('.editName').attr('value');
  var age = row.find('.editAge').attr('value');
  var gender = row.find('.editGender').find('option:selected').text();

  row.find('td:eq(0)').text(name);
  row.find('td:eq(1)').text(age);
  row.find('td:eq(2)').text(gender);
  row.find('td:eq(3)').html('<button class="editBtn">编辑</button>');
});

以上代码实现了当用户点击编辑按钮时，将表格中的文本替换为可编辑的输入框或下拉框。当用户点击保存按钮时，将修改后的数据保存到数据库中，再将表格中的文本更新为编辑前的数据。如果用户取消编辑，则恢复为编辑前的数据。