正文

学会用jQuery轻松给表格动态添加一行，同步更新数据库教程

/0 浏览量
0922

在这个数字化时代，表格在数据管理和展示中扮演着重要角色。而使用jQuery，我们可以轻松地实现表格的动态添加行，并同步更新数据库。下面，我将一步步带你完成这个过程。

准备工作

在开始之前，请确保你已经：

  1. 熟悉HTML和CSS的基本知识。
  2. 了解jQuery的基本用法。
  3. 拥有一个可以操作的数据库。

步骤一：创建HTML表格

首先，我们需要一个基础的HTML表格。以下是一个简单的示例：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td><button class="deleteBtn">删除</button></td>
    </tr>
  </tbody>
</table>
<button id="addRowBtn">添加行</button>

步骤二：添加jQuery代码

接下来，我们需要编写jQuery代码来实现动态添加行和同步更新数据库的功能。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // 添加行按钮点击事件
    $('#addRowBtn').click(function() {
      // 创建新的行元素
      var newRow = $('<tr></tr>');
      newRow.append('<td><input type="text" name="name" /></td>');
      newRow.append('<td><input type="text" name="age" /></td>');
      newRow.append('<td><button class="deleteBtn">删除</button></td>');

      // 将新行添加到表格中
      $('#myTable tbody').append(newRow);
    });

    // 删除按钮点击事件
    $('#myTable').on('click', '.deleteBtn', function() {
      $(this).closest('tr').remove();
    });

    // 提交按钮点击事件
    $('#myTable').on('click', '.submitBtn', function() {
      var rowData = $(this).closest('tr').find('input').serialize();

      // 同步更新数据库
      $.ajax({
        url: 'updateDatabase.php', // 数据库更新脚本路径
        type: 'POST',
        data: rowData,
        success: function(response) {
          console.log(response);
        }
      });
    });
  });
</script>

步骤三：编写数据库更新脚本

最后，我们需要编写一个PHP脚本（或任何其他服务器端脚本）来处理数据库更新请求。

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 获取表单数据
$name = $_POST['name'];
$age = $_POST['age'];

// 插入数据到数据库
$sql = "INSERT INTO myTable (name, age) VALUES ('$name', '$age')";

if ($conn->query($sql) === TRUE) {
  echo "新记录插入成功";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

总结

通过以上步骤，我们已经成功实现了使用jQuery动态添加表格行并同步更新数据库的功能。在实际应用中，你可以根据自己的需求对代码进行调整和优化。希望这个教程能对你有所帮助！

-- 展开阅读全文 --