jquery增加表格行資料庫

隨著網路科技的不斷發展，越來越多的企事業單位、個人都開始將自己的業務轉換成網路。網站作為一個企業、個人展示及互動的窗口，具有廣泛的適用性和便利性。在網頁中，表格作為一種最基本的資料展示方式，在實際應用中非常重要。 jquery是目前應用最廣泛的Ja​​vaScript庫之一，提供了許多便捷的方法，可以輕鬆操作DOM元素，透過ajax技術實現與後台資料交互，實現動態更新。

本文將介紹如何使用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連結直接引入。

#二、實作過程

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技術實現。首先，需要編寫一個伺服器端的接口，該接口可以接受請求，將資料保存到資料庫中。

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檔案中。在伺服器端保存資料成功之後，前端會彈出提示訊息「保存成功！」。

三、總結

本文介紹如何使用jquery實作增加表格行，並將資料儲存到資料庫中。在實際應用中，可以根據業務需求，適當地修改相關程式碼，以滿足自己的需求。同時，本文也提供了一個簡單的思路，可以引導讀者更深入地理解jquery和ajax技術的應用。

以上是jquery增加表格行資料庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！