jquery fügt Tabellenzeilen zur Datenbank hinzu

Mit der kontinuierlichen Weiterentwicklung der Internet-Technologie haben immer mehr Unternehmen, Institutionen und Einzelpersonen damit begonnen, ihre Geschäfte auf das Internet umzustellen. Als Fenster für geschäftliche und persönliche Präsentationen und Interaktionen ist die Website vielseitig einsetzbar und praktisch. Auf Webseiten stellen Tabellen die grundlegendste Art der Datendarstellung dar und sind in praktischen Anwendungen sehr wichtig. jquery ist derzeit eine der am weitesten verbreiteten JavaScript-Bibliotheken. Sie bietet viele praktische Methoden zur einfachen Bedienung von DOM-Elementen, zur Interaktion mit Hintergrunddaten über Ajax-Technologie und zur Erzielung dynamischer Aktualisierungen.

In diesem Artikel wird erläutert, wie Sie mit jquery Tabellenzeilen hinzufügen und die Daten in der Datenbank speichern.

1. Vorbereitung

1 Erstellen Sie eine Datenbank und zugehörige Tabellen und legen Sie Feldnamen und Datentypen fest.

In diesem Artikel wird MySQL als Beispiel verwendet, um eine Datenbank mit dem Namen test_db zu erstellen und eine Tabelle mit dem Namen test_table in der Datenbank zu erstellen. Die Tabelle enthält vier Felder: id INT(11) AUTO_INCREMENT, name VARCHAR(20). , Geschlecht VARCHAR(4), Alter INT(4), wobei das ID-Feld automatisch inkrementiert wird.

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 Webseite Einführung in die JQuery-Bibliotheksdatei

In diesem Artikel wird die Version JQuery3.5.1 verwendet. Sie können die Datei von der offiziellen Website herunterladen oder den CDN-Link verwenden, um sie direkt zu importieren.

#🎜🎜 #

2. Implementierungsprozess

1 Seitenlayout

Zuerst müssen Sie eine Tabelle auf der Webseite erstellen und die Kopfzeile festlegen.

NameGeschlechtALTERBetrieb2. Tabellenzeilen hinzufügen

Als nächstes müssen Sie eine Funktion zum Hinzufügen von Tabellenzeilen implementieren, die Funktion wird ausgeführt und a Eine neue Zeile wird in die letzte Zeile der Tabelle eingefügt.

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 dieser Funktion werden zunächst der vom Benutzer eingegebene Name, das Geschlecht und das Alter mithilfe von Jquery abgerufen Die Funktion $() erstellt ein neues Zeilenelement und erstellt mit der Funktion $() vier neue Spaltenelemente, die zur Anzeige von Name, Geschlecht, Alter und Operation verwendet werden. Fügen Sie abschließend die vier Spaltenelemente zu den Zeilenelementen hinzu und fügen Sie das Zeilenelement zur letzten Zeile der Tabelle hinzu.

3. Tabellenzeilen löschen

Wenn Sie eine Zeile löschen müssen, können Sie die folgende Funktion ausführen:

function deleteRow(obj) {

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

}

Diese Funktion verwendet die Parents()-Methode von jquery, um das Zeilenelement zu finden, in dem sich die Schaltfläche befindet, und verwendet die Remove()-Methode, um es aus dem DOM zu entfernen Baum.

4. Daten in der Datenbank speichern

Wenn der Benutzer eine Datenzeile hinzufügt, müssen die Daten in der Datenbank gespeichert werden, was durch Ajax-Technologie erreicht werden kann. Zunächst müssen Sie eine serverseitige Schnittstelle schreiben, die Anfragen annehmen und Daten in der Datenbank speichern kann.

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

Stellen Sie in dieser Schnittstelle zuerst eine Verbindung zur Datenbank her und rufen Sie dann die vom Benutzer übermittelten Daten ab. und holen Sie sich schließlich die Daten und fügen Sie die Daten in die Tabelle test_table ein. Schließen Sie abschließend die Datenbankverbindung.

Wenn der Benutzer im Front-End-Code Daten übermittelt, muss die Ajax-Technologie verwendet werden, um die Daten an den Server zu senden. Der Code zum Senden von Daten lautet wie folgt:

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

}

Diese Funktion wird verwendet, um die gesamte Tabelle zu durchlaufen und Erhalten Sie die Daten jeder Zeile und übertragen Sie Daten mithilfe der Ajax-Technologie in die Datei save.php auf der Serverseite. Nachdem die Daten erfolgreich auf der Serverseite gespeichert wurden, zeigt das Frontend die Meldung „Erfolgreich gespeichert!“ an.

3. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jquery Tabellenzeilen hinzufügen und die Daten in der Datenbank speichern. In tatsächlichen Anwendungen kann der relevante Code entsprechend den Geschäftsanforderungen entsprechend geändert werden, um Ihren eigenen Anforderungen gerecht zu werden. Gleichzeitig bietet dieser Artikel auch eine einfache Idee, die den Lesern helfen kann, die Anwendung der JQuery- und Ajax-Technologie besser zu verstehen.

Das obige ist der detaillierte Inhalt vonjquery fügt Tabellenzeilen zur Datenbank hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!