jQuery实现可以编辑的表格实例详解【附demo源码下载】

下面是针对“jQuery实现可以编辑的表格实例详解【附demo源码下载】”这篇文章的完整攻略：

文章概述

这篇文章主要介绍了如何使用jQuery实现一个可以编辑的表格，并提供了对应的示例代码，帮助读者快速理解实现过程。文章主要分为以下几个部分：

1. jQuery实现表格通用编辑功能
2. 自定义编辑控件
3. 编辑后保存数据

jQuery实现表格通用编辑功能

文章首先介绍了如何使用jQuery实现表格的通用编辑功能，即给表格中的每个单元格绑定双击事件，双击即可将单元格内容转为可编辑状态。

示例代码如下：

$(document).on('dblclick', 'td[contenteditable!=true]', function() {
  $(this).attr('contenteditable', 'true');
  $(this).data('before', $(this).html());
}).on('blur keyup paste', 'td[contenteditable=true]', function() {
  if ($(this).data('before') !== $(this).html()) {
    $(this).data('before', $(this).html());
    // 编辑内容改变后的操作
  }
  $(this).attr('contenteditable', 'false');
});

代码中的dblclick绑定双击事件，blur绑定失去焦点事件，keyup和paste绑定内容改变事件。通过attr修改contenteditable属性的值，从而将单元格转为可编辑状态或者只读状态。

自定义编辑控件

针对某些需要自定义编辑控件的场景，文章介绍了如何在单元格中添加自定义控件，并绑定对应的事件处理函数，例如change事件。

示例代码如下：

var input = $('<input type="text" class="form-control input-sm">');
input.val(text);
$(td).empty().append(input);
input.focus();
input.click(function() {
  return false;
}).keypress(function(e) {
  if (e.which == 13) {
    saveData(td, input.val());
  }
});

代码中使用$('<input type="text" class="form-control input-sm">')创建了一个文本输入框，然后将其添加到单元格中。通过focus让输入框获得焦点，并通过click绑定点击事件，防止冒泡导致单元格被选中。同时，通过keypress监听回车键，触发保存数据的操作。

编辑后保存数据

最后，文章提出了一个非常重要的问题：如何在编辑过程中实时保存修改后的数据？对此，文章给出的处理方法是在表单提交或者保存按钮被单击时，通过遍历表格中的单元格，将其中的内容收集起来并发送到后端进行处理。

示例代码如下：

// 保存按钮单击事件
$('#save').click(function() {
  var data = [];
  $('table tr').each(function(row, tr) {
    if (row > 0) {
      var rowData = {};
      $(tr).find('td').each(function(col, td) {
        rowData[$('thead tr th').eq(col).text()] = $(td).text();
      });
      data.push(rowData);
    }
  });
  // 发送请求保存数据
  $.ajax({
    type: 'POST',
    url: '/save',
    data: JSON.stringify(data),
    dataType: 'json',
    contentType: "application/json;charset=utf-8",
    success: function() {
      alert('数据保存成功！');
    }
  });
});

代码中通过$('table tr').each遍历表格中的每一行，而后通过$(tr).find('td').each遍历每一行中的每一个单元格，并取出其内容。最后将所有的修改数据封装成JSON对象，并通过ajax发送给后端进行保存处理。

总结

以上就是“jQuery实现可以编辑的表格实例详解”文章的完整攻略。本文详细介绍了如何使用jQuery实现表格的编辑功能，并提供了两个示例代码。在最后，文章还讨论了如何实现编辑数据的实时保存，这是实现编辑表格的重点。这篇文章对于想要制作可编辑表格的前端开发者，有很强的实用价值。