jQuery实现可编辑表格并生成json结果(实例代码)

下面我将详细讲解“jQuery实现可编辑表格并生成json结果(实例代码)”的完整攻略。

1. 安装jQuery

在使用jQuery之前，需要在html文件中先引入jQuery库。可以在head标签中添加以下代码：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. 创建HTML表格

在页面中创建一个HTML表格，并添加必要的标记如class或者id。如下所示：

<table class="editable-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">John</td>
      <td contenteditable="true">30</td>
      <td contenteditable="true">Male</td>
    </tr>
    <tr>
      <td contenteditable="true">Lucy</td>
      <td contenteditable="true">25</td>
      <td contenteditable="true">Female</td>
    </tr>
  </tbody>
</table>

其中，contenteditable属性允许单元格可编辑。

3. jQuery代码实现

// 获取表格中的所有行
var $rows = $('.editable-table tbody tr');
// 创建数组存储表格数据
var data = [];

// 循环遍历所有行
$rows.each(function () {
  var $name = $(this).find('td:eq(0)').text();
  var $age = $(this).find('td:eq(1)').text();
  var $gender = $(this).find('td:eq(2)').text();

  // 将表格数据封装成对象并存储到数组中
  var obj = {};
  obj.name = $name;
  obj.age = $age;
  obj.gender = $gender;
  data.push(obj);
});

// 将表格数据转换成json字符串
var jsonData = JSON.stringify(data);

以上代码使用了jQuery遍历表格中的行和单元格，并将数据封装成对象后存储到数组中。最后使用JSON.stringify()方法将数据转换成json格式字符串。

示例说明

示例一

现在，我们想要删除表格中的某一行数据，只需要在该行上添加一个删除按钮，并为按钮绑定点击事件。

HTML代码：

<tr>
  <td contenteditable="true">John</td>
  <td contenteditable="true">30</td>
  <td contenteditable="true">Male</td>
  <td><button class="delete-row">Delete</button></td>
</tr>

jQuery代码：

// 绑定删除按钮的点击事件
$('.delete-row').click(function () {
  $(this).closest('tr').remove();
});

当点击删除按钮时，通过closest()方法找到该行并删除。

示例二

现在，我们想要将表格数据保存到后端的数据库中。

HTML代码：

<button id="save-data">Save Data</button>

jQuery代码：

// 绑定保存按钮的点击事件
$('#save-data').click(function () {
  var jsonData = JSON.stringify(data);
  $.ajax({
    url: 'http://localhost/save-data.php',
    type: 'POST',
    data: {data: jsonData},
    success: function (response) {
      alert('Data saved successfully!');
    },
    error: function () {
      alert('Error: data not saved!');
    }
  });
});

当点击保存按钮时，使用jQuery的ajax()方法将数据发送到服务器的save-data.php文件中，并在成功后给予用户提示。data属性将表格数据转换为json字符串作为参数发送到后端。在save-data.php中使用$_POST来接收数据，然后可以将数据保存到数据库中。

综上所述，以上就是“jQuery实现可编辑表格并生成json结果(实例代码)”的完整攻略。