隨著網路科技的不斷發展，越來越多的企事業單位、個人都開始將自己的業務轉換成網路。網站作為一個企業、個人展示及互動的窗口，具有廣泛的適用性和便利性。在網頁中，表格作為一種最基本的資料展示方式，在實際應用中非常重要。 jquery是目前應用最廣泛的JavaScript庫之一，提供了許多便捷的方法，可以輕鬆操作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中文網其他相關文章！
