jquery增加表格行数据库

发布时间：2023-09-16 11:30:20 所属栏目：教程来源：未知

导读： 　　一、准备工作

　　1.创建数据库以及相关的表格，并确立好字段名称及数据类型。

　　本文以Mysql为例，创建一个名为test_db的数据库，并在该数据库中创建一个名为test_tabl

　　一、准备工作

　　1.创建数据库以及相关的表格，并确立好字段名称及数据类型。

　　本文以Mysql为例，创建一个名为test_db的数据库，并在该数据库中创建一个名为test_table的表格，该表格包含四个字段：id INT(11) AUTO_INCREMENT, name VARCHAR(20), sex VARCHAR(4), age INT(4)，其中id字段为自动增量。

　　CREATE DATABASE test_db;

　　USE test_db;

　　CREATE TABLE test_table(

　　id INT(11) AUTO_INCREMENT PRIMARY KEY,

　　name VARCHAR(20) NOT NULL,

　　sex VARCHAR(4) NOT NULL,

　　age INT(4) NOT NULL

　　);

　　2.在网页中引入jquery库文件

　　本文使用的是jquery3.5.1版本，可以从官网下载该文件，也可以使用cdn链接直接引入。

　　<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

　　二、实现过程

　　1.页面布局

　　首先，需要在网页中建立一个表格，并设置好表头。

　　姓名性别年龄操作

　　2.增加表格行

　　接下来，需要实现一个增加表格行的函数，当点击“新增”按钮时，会执行该函数，并将新建的行插入到表格的最后一行。

　　function addRow() {

　　var name = $("#nameInput").val();

　　var sex = $("#sexInput").val();

　　var age = $("#ageInput").val();

　　var tr = $("<tr></tr>");

　　var td1 = $("<td>" + name + "</td>");

　　var td2 = $("<td>" + sex + "</td>");

　　var td3 = $("<td>" + age + "</td>");

　　var td4 = $("<td><button onclick="deleteRow(this)">删除</button></td>");

　　tr.append(td1, td2, td3, td4);

　　$("#testTable tbody").append(tr);

　　}

　　在该函数中，首先获取用户输入的姓名、性别和年龄，使用jquery的$()函数创建一个新的行元素，并使用$()函数创建四个新的列元素，分别用于展示姓名、性别、年龄和操作。最后，将四个列元素添加到行元素中，并将行元素添加到表格的最后一行。

　　3.删除表格行

　　当需要删除一行时，可以执行如下函数：

　　function deleteRow(obj) {

　　$(obj).parents("tr").remove();

　　}

　　该函数使用jquery的parents()方法查找该按钮所在的行元素，并使用remove()方法将其从DOM树中删除。

　　4.保存数据到数据库中

　　当用户添加一行数据时，需要将该数据保存到数据库中，可以通过ajax技术实现。首先，需要编写一个服务器端的接口，该接口可以接受请求，将数据保存到数据库中。

　　<?php

　　header("content-type:text/html;charset=utf-8");

　　$conn = mysqli_connect("localhost", "root", "123456", "test_db");

　　$name = $_POST['name'];

　　$sex = $_POST['sex'];

　　$age = $_POST['age'];

　　$sql = "INSERT INTO test_table (name, sex, age) VALUES ('$name', '$sex', '$age')";

　　mysqli_query($conn, $sql);

　　mysqli_close($conn);

　　?>

　　在该接口中，首先连接数据库，然后获取用户提交的数据，最后根据获取到的数据，将该数据插入到test_table表格中。最后关闭数据库连接。

　　在前端代码中，当用户提交数据时，需要使用ajax技术将数据发送给服务器端。发送数据的代码如下：

　　function saveData() {

　　var name, sex, age;

　　$("#testTable tbody tr").each(function (index) {

　　    name = $(this).find("td:eq(0)").text().trim();

　　    sex = $(this).find("td:eq(1)").text().trim();

　　    age = $(this).find("td:eq(2)").text().trim();

　　    $.post("save.php", {name:name, sex:sex, age:age}, function () {

　　        alert("保存成功！");

　　    });

　　});

　　}

　　该函数用于遍历整个表格，获取每一行的数据，并使用ajax技术将数据传送到服务器端的save.php文件中。在服务器端保存数据成功之后，前端会弹出提示信息“保存成功！”。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!