jquery ajoute une base de données de lignes de table

Avec le développement continu de la technologie Internet, de plus en plus d'entreprises, d'institutions et de particuliers commencent à convertir leurs activités à Internet. En tant que fenêtre d'affichage et d'interaction professionnelle et personnelle, le site Web présente une large applicabilité et une grande commodité. Dans les pages Web, les tableaux constituent le moyen le plus simple d’afficher des données et sont très importants dans les applications pratiques. jquery est l'une des bibliothèques JavaScript les plus utilisées actuellement. Elle fournit de nombreuses méthodes pratiques pour utiliser facilement les éléments DOM, interagir avec les données d'arrière-plan via la technologie ajax et réaliser des mises à jour dynamiques.

Cet article explique comment utiliser jquery pour ajouter des lignes de tableau et enregistrer les données dans la base de données.

1. Préparation

1. Créez la base de données et les tables associées, et établissez les noms de champs et les types de données.

Cet article prend Mysql comme exemple pour créer une base de données nommée test_db et créer une table nommée test_table dans la base de données. La table contient quatre champs : id INT(11) AUTO_INCREMENT, nom VARCHAR(20), sexe VARCHAR(4). , age INT(4), où le champ id est automatiquement incrémenté.

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. Introduisez le fichier de bibliothèque jquery dans la page Web

Cet article utilise la version jquery3.5.1, qui peut être téléchargée à partir du site officiel, ou vous pouvez utiliser le lien cdn pour importer directement.

2. .Mise en page

Tout d'abord, vous devez créer un tableau dans la page Web et définir l'en-tête.

Ensuite, vous devez implémenter une fonction pour ajouter des lignes de tableau. Lorsque vous cliquez sur le bouton "Ajouter", la fonction sera exécutée et la nouvelle ligne sera insérée dans la dernière ligne du tableau. .

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

}

Dans cette fonction, obtenez d'abord le nom, le sexe et l'âge saisis par l'utilisateur, utilisez la fonction $() de jquery pour créer un nouvel élément de ligne et utilisez la fonction $() créer Quatre nouveaux éléments de colonne sont utilisés pour afficher le nom, le sexe, l'âge et l'opération. Enfin, ajoutez les quatre éléments de colonne aux éléments de ligne et ajoutez l'élément de ligne à la dernière ligne du tableau.

3. Supprimer les lignes du tableau

Lorsque vous devez supprimer une ligne, vous pouvez exécuter la fonction suivante :

function deleteRow(obj) {

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

}

Cette fonction utilise la méthode parents() de jquery pour trouver la ligne. élément où se trouve le bouton et utilisez la méthode remove() pour le supprimer de l'arborescence DOM.

4. Enregistrer les données dans la base de données

Lorsque l'utilisateur ajoute une ligne de données, les données doivent être enregistrées dans la base de données, ce qui peut être réalisé grâce à la technologie ajax. Tout d’abord, vous devez écrire une interface côté serveur capable d’accepter les demandes et d’enregistrer les données dans la base de données.

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 (nom, sexe, âge) VALUES ("$name", '$sex', '$age')";
mysqli_query($conn, $sql);
mysqli_close($conn);
?>

Dans cette interface, connectez-vous d'abord au database , puis obtenez les données soumises par l'utilisateur et enfin insérez les données dans la table test_table en fonction des données obtenues. Fermez enfin la connexion à la base de données.

Dans le code front-end, lorsque l'utilisateur soumet des données, la technologie ajax doit être utilisée pour envoyer les données au serveur. Le code pour envoyer des données est le suivant :

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

}

Cette fonction permet de parcourir toute la table, d'obtenir les données de chaque ligne et d'utiliser la technologie ajax pour transférer les données vers la sauvegarde Fichier .php côté serveur. Une fois les données enregistrées avec succès côté serveur, le frontal affichera un message d'invite "Enregistrer avec succès !".

3. Résumé

Cet article explique comment utiliser jquery pour ajouter des lignes de tableau et enregistrer les données dans la base de données. Dans les applications réelles, le code concerné peut être modifié de manière appropriée en fonction des besoins de l'entreprise et de vos propres besoins. Dans le même temps, cet article fournit également une idée simple qui peut aider les lecteurs à comprendre plus en profondeur l'application de la technologie jquery et ajax.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!