正文

如何用 jQuery 在网页表格中动态增加一行，并同步到数据库存储

/0 浏览量
0923

在网页中，我们经常需要根据用户操作动态地增加表格行，并且将这些更改同步到数据库中。以下是一个使用 jQuery 和 JavaScript 实现这一功能的详细步骤。

1. 准备工作

首先，确保你的网页中已经包含了 jQuery 库。你可以通过 CDN 链接将其引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. HTML 结构

创建一个简单的 HTML 表格，用于展示数据：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>30</td>
      <td><button class="deleteRow">删除</button></td>
    </tr>
  </tbody>
</table>
<button id="addRowBtn">增加一行</button>

3. 添加行到表格

使用 jQuery，我们可以为“增加一行”按钮添加一个点击事件，动态地创建一个新行并添加到表格中：

$(document).ready(function() {
  $('#addRowBtn').click(function() {
    var lastRow = $('#myTable tbody tr:last');
    var newRow = lastRow.clone();
    var newId = parseInt(lastRow.find('td:first').text()) + 1;

    newRow.find('td:first').text(newId);
    newRow.find('td:nth-child(2)').text('');
    newRow.find('td:nth-child(3)').text('');
    newRow.find('td:nth-child(4)').append('<button class="deleteRow">删除</button>');

    $('#myTable tbody').append(newRow);
  });
});

4. 删除行

同样地，我们可以为每个删除按钮添加一个点击事件，用于删除对应的行：

$(document).ready(function() {
  $('#myTable').on('click', '.deleteRow', function() {
    $(this).closest('tr').remove();
  });
});

5. 同步到数据库

为了将表格的更改同步到数据库，我们需要编写一个服务器端脚本来处理这些更改。以下是一个简单的 PHP 示例：

<?php
// 假设你已经连接到数据库
// $conn = new mysqli("localhost", "username", "password", "database");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $table = $_POST['table'];
  $data = $_POST['data'];

  // 将数据插入或更新数据库
  // 这里需要根据你的具体数据库结构和需求来编写 SQL 语句
  // $stmt = $conn->prepare("INSERT INTO $table VALUES (?, ?, ?)");
  // $stmt->bind_param("isi", $data[0], $data[1], $data[2]);
  // $stmt->execute();

  echo "数据已同步到数据库";
}
?>

6. AJAX 请求

在 jQuery 中，我们可以使用 AJAX 发送一个 POST 请求，将表格的更改同步到服务器端：

$(document).ready(function() {
  $('#myTable').on('change', 'input', function() {
    var row = $(this).closest('tr');
    var data = {
      table: 'myTable',
      data: [row.find('td:first').text(), row.find('td:nth-child(2)').text(), row.find('td:nth-child(3)').text()]
    };

    $.post('your-server-script.php', data, function(response) {
      console.log(response);
    });
  });
});

以上就是一个使用 jQuery 在网页表格中动态增加一行并同步到数据库存储的完整示例。在实际应用中，你可能需要根据你的具体需求调整代码。

-- 展开阅读全文 --