首頁 >web前端 >前端問答 >jquery增加表格行資料庫

jquery增加表格行資料庫

王林
王林原創
2023-05-08 20:31:38672瀏覽

隨著網路科技的不斷發展,越來越多的企事業單位、個人都開始將自己的業務轉換成網路。網站作為一個企業、個人展示及互動的窗口,具有廣泛的適用性和便利性。在網頁中,表格作為一種最基本的資料展示方式,在實際應用中非常重要。 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連結直接引入。

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn