jquery adds table row database

With the continuous development of Internet technology, more and more enterprises, institutions, and individuals have begun to convert their businesses to the Internet. As a window for corporate and personal display and interaction, the website has wide applicability and convenience. In web pages, tables are the most basic way of displaying data and are very important in practical applications. jquery is one of the most widely used JavaScript libraries currently. It provides many convenient methods to easily operate DOM elements, interact with background data through ajax technology, and achieve dynamic updates.

This article will introduce how to use jquery to add table rows and save the data to the database.

1. Preparation

1. Create the database and related tables, and establish the field names and data types.

This article takes Mysql as an example to create a database named test_db, and create a table named test_table in the database. The table contains four fields: id INT(11) AUTO_INCREMENT, name VARCHAR( 20), sex VARCHAR(4), age INT(4), where the id field is automatically incremented.

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.Introduce the jquery library file into the web page

This article uses the jquery3.5.1 version. You can download the file from the official website, or you can use the cdn link to import it directly.

2. Implementation process

1. Page layout

First, you need to create a table in the web page and set the header.

Name	gender	age	operate

2. Add table rows

Next, you need to implement a function to add table rows. When the "Add" button is clicked, the function will be executed and the new row will be inserted into The last row of the table.

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);

}

In this function, first get the name, gender and age entered by the user, and use jquery’s $() function to create a New row elements, and use the $() function to create four new column elements, used to display name, gender, age and operation. Finally, add the four column elements to the row elements, and add the row element to the last row of the table.

3. Delete table rows

When you need to delete a row, you can execute the following function:

function deleteRow(obj) {

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

}

This function uses jquery's parents() method to find the row element where the button is located, and uses the remove() method to remove it from the DOM tree.

4. Save data to the database

When the user adds a row of data, the data needs to be saved to the database, which can be achieved through ajax technology. First, you need to write a server-side interface that can accept requests and save data to the database.

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);
?>

In this interface, first connect to the database, then obtain the data submitted by the user, and finally insert the data into the test_table table based on the obtained data. Finally close the database connection.

In the front-end code, when the user submits data, ajax technology needs to be used to send the data to the server. The code to send data is as follows:

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("保存成功！");
    });
});

}

This function is used to traverse the entire table, obtain the data of each row, and use ajax technology to The data is transferred to the save.php file on the server side. After the data is saved successfully on the server side, the front-end will pop up a prompt message "Save successfully!".

3. Summary

This article introduces how to use jquery to add table rows and save the data to the database. In actual applications, the relevant code can be modified appropriately according to business needs to meet your own needs. At the same time, this article also provides a simple idea that can guide readers to understand the application of jquery and ajax technology more deeply.

The above is the detailed content of jquery adds table row database. For more information, please follow other related articles on the PHP Chinese website!