您好,登錄后才能下訂單哦!
今天小編給大家分享一下jquery怎么增加表格行數(shù)據(jù)庫的相關(guān)知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
一、準(zhǔn)備工作
1.創(chuàng)建數(shù)據(jù)庫以及相關(guān)的表格,并確立好字段名稱及數(shù)據(jù)類型。
本文以Mysql為例,創(chuàng)建一個名為test_db的數(shù)據(jù)庫,并在該數(shù)據(jù)庫中創(chuàng)建一個名為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.在網(wǎng)頁中引入jquery庫文件
本文使用的是jquery3.5.1版本,可以從官網(wǎng)下載該文件,也可以使用cdn鏈接直接引入。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
二、實現(xiàn)過程
1.頁面布局
首先,需要在網(wǎng)頁中建立一個表格,并設(shè)置好表頭。
姓名 | 性別 | 年齡 | 操作 |
---|
2.增加表格行
接下來,需要實現(xiàn)一個增加表格行的函數(shù),當(dāng)點擊“新增”按鈕時,會執(zhí)行該函數(shù),并將新建的行插入到表格的最后一行。
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);
}
在該函數(shù)中,首先獲取用戶輸入的姓名、性別和年齡,使用jquery的$()函數(shù)創(chuàng)建一個新的行元素,并使用$()函數(shù)創(chuàng)建四個新的列元素,分別用于展示姓名、性別、年齡和操作。最后,將四個列元素添加到行元素中,并將行元素添加到表格的最后一行。
3.刪除表格行
當(dāng)需要刪除一行時,可以執(zhí)行如下函數(shù):
function deleteRow(obj) {
$(obj).parents("tr").remove();
}
該函數(shù)使用jquery的parents()方法查找該按鈕所在的行元素,并使用remove()方法將其從DOM樹中刪除。
4.保存數(shù)據(jù)到數(shù)據(jù)庫中
當(dāng)用戶添加一行數(shù)據(jù)時,需要將該數(shù)據(jù)保存到數(shù)據(jù)庫中,可以通過ajax技術(shù)實現(xiàn)。首先,需要編寫一個服務(wù)器端的接口,該接口可以接受請求,將數(shù)據(jù)保存到數(shù)據(jù)庫中。
<?php
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);
?>
在該接口中,首先連接數(shù)據(jù)庫,然后獲取用戶提交的數(shù)據(jù),最后根據(jù)獲取到的數(shù)據(jù),將該數(shù)據(jù)插入到test_table表格中。最后關(guān)閉數(shù)據(jù)庫連接。
在前端代碼中,當(dāng)用戶提交數(shù)據(jù)時,需要使用ajax技術(shù)將數(shù)據(jù)發(fā)送給服務(wù)器端。發(fā)送數(shù)據(jù)的代碼如下:
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("保存成功!"); }); });
}
該函數(shù)用于遍歷整個表格,獲取每一行的數(shù)據(jù),并使用ajax技術(shù)將數(shù)據(jù)傳送到服務(wù)器端的save.php文件中。在服務(wù)器端保存數(shù)據(jù)成功之后,前端會彈出提示信息“保存成功!”。
以上就是“jquery怎么增加表格行數(shù)據(jù)庫”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。