隨著網路科技的不斷發展,越來越多的企事業單位、個人都開始將自己的業務轉換成網路。網站作為一個企業、個人展示及互動的窗口,具有廣泛的適用性和便利性。在網頁中,表格作為一種最基本的資料展示方式,在實際應用中非常重要。 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連結直接引入。
e31d866df1641e9d89a6e7339af6ca322cacc6d41bbb37262a98f745aa00fbf0
#二、實作過程
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技術實現。首先,需要編寫一個伺服器端的接口,該接口可以接受請求,將資料保存到資料庫中。
9fb095019a19d0a35f4dc4942d411689
在該介面中,首先連接資料庫,然後取得使用者提交的數據,最後根據取得的數據,將該資料插入到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中文網其他相關文章!