«

jquery怎么增加表格行数据库

时间:2024-4-25 09:04     作者:韩俊     分类: Javascript


今天小编给大家分享一下jquery怎么增加表格行数据库的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、准备工作

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文件中。在服务器端保存数据成功之后,前端会弹出提示信息“保存成功!”。

标签: javascript

热门推荐