jquery menambah pangkalan data baris jadual

Dengan perkembangan berterusan teknologi Internet, semakin banyak perusahaan, institusi dan individu mula menukar perniagaan mereka kepada Internet. Sebagai tingkap untuk paparan dan interaksi korporat dan peribadi, tapak web mempunyai kebolehgunaan dan kemudahan yang luas. Dalam halaman web, jadual adalah cara paling asas untuk memaparkan data dan sangat penting dalam aplikasi praktikal. jquery ialah salah satu perpustakaan JavaScript yang paling banyak digunakan pada masa ini Ia menyediakan banyak kaedah mudah untuk mengendalikan elemen DOM dengan mudah, berinteraksi dengan data latar belakang melalui teknologi ajax, dan mencapai kemas kini dinamik.

Artikel ini akan memperkenalkan cara menggunakan jquery untuk menambah baris jadual dan menyimpan data ke pangkalan data.

1. Penyediaan

1. Cipta pangkalan data dan jadual yang berkaitan, dan wujudkan nama medan dan jenis data.

Artikel ini mengambil Mysql sebagai contoh untuk mencipta pangkalan data bernama test_db, dan mencipta jadual bernama test_table dalam pangkalan data Jadual mengandungi empat medan: id INT(11) AUTO_INCREMENT, nama VARCHAR( 20), jantina. VARCHAR(4), umur INT(4), di mana medan id ditambah secara automatik.

CIPTA PANGKALAN DATA test_db;
GUNAKAN test_db;
CIPTA JADUAL 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 🎜>

Artikel ini menggunakan versi jquery3.5.1 Anda boleh memuat turun fail dari laman web rasmi atau mengimportnya terus menggunakan pautan cdn.

2. Proses pelaksanaan

1. Reka letak halaman

Pertama, anda perlu membuat jadual dalam halaman web dan menetapkan pengepala.

姓名	性别	年龄	操作

2. Tambah baris jadual

Seterusnya, anda perlu melaksanakan fungsi untuk menambah baris jadual Apabila butang "Tambah" diklik, fungsi akan dilaksanakan dan yang baharu Baris dimasukkan ke dalam baris terakhir jadual.

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);

}

Dalam fungsi ini, mula-mula dapatkan nama, jantina dan umur yang dimasukkan oleh pengguna, dan gunakan fungsi $() jquery untuk cipta elemen baris Baharu, dan gunakan fungsi $() untuk mencipta empat elemen lajur baharu, digunakan untuk memaparkan nama, jantina, umur dan operasi. Akhir sekali, tambahkan empat elemen lajur pada elemen baris, dan tambahkan elemen baris pada baris terakhir jadual.

3. Padamkan baris jadual

Apabila anda perlu memadamkan baris, anda boleh melaksanakan fungsi berikut:

fungsi deleteRow(obj) {

$(obj).parents("tr").remove();

}

Fungsi ini menggunakan kaedah ibu bapa() jquery untuk mencari elemen baris di mana butang itu terletak dan menggunakan kaedah remove() untuk mengalih keluarnya daripada pepohon DOM.

4. Simpan data ke pangkalan data

Apabila pengguna menambah baris data, data perlu disimpan ke pangkalan data, yang boleh dicapai melalui teknologi ajax. Pertama, anda perlu menulis antara muka sebelah pelayan yang boleh menerima permintaan dan menyimpan data ke pangkalan data.

header("content-type:text/html;charset=utf-8");
$conn = mysqli_connect("localhost", "root", "123456 ", "test_db");
$nama = $_POST['nama'];
$jantina = $_POST['jantina'];
$umur = $_POST['umur'];
$sql = "MASUKKAN KE DALAM jadual_ujian (nama, jantina, umur) NILAI ('$nama', '$jantina', '$umur')";
mysqli_query($conn, $sql);
mysqli_close($conn);
?>

Dalam antara muka ini, mula-mula sambung ke pangkalan data, kemudian dapatkan data yang dihantar oleh pengguna, dan akhir sekali masukkan data ke dalam jadual test_table berdasarkan yang diperolehi data. Akhir sekali tutup sambungan pangkalan data.

Dalam kod bahagian hadapan, apabila pengguna menyerahkan data, teknologi ajax perlu digunakan untuk menghantar data ke pelayan. Kod untuk menghantar data adalah seperti berikut:

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("保存成功！");
    });
});

}

Fungsi ini digunakan untuk melintasi keseluruhan jadual, dapatkan data setiap baris , dan gunakan teknologi ajax untuk menyimpan Data dipindahkan ke fail save.php pada bahagian pelayan. Selepas data berjaya disimpan di bahagian pelayan, bahagian hadapan akan muncul mesej segera "Simpan berjaya!".

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan jquery untuk menambah baris jadual dan menyimpan data ke pangkalan data. Dalam aplikasi sebenar, kod yang berkaitan boleh diubah suai dengan sewajarnya mengikut keperluan perniagaan untuk memenuhi keperluan anda sendiri. Pada masa yang sama, artikel ini juga memberikan idea mudah yang boleh membimbing pembaca memahami aplikasi teknologi jquery dan ajax dengan lebih mendalam.

Atas ialah kandungan terperinci jquery menambah pangkalan data baris jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!