jquery는 데이터베이스에 테이블 행을 추가합니다.

인터넷 기술의 지속적인 발전으로 점점 더 많은 기업, 기관 및 개인이 비즈니스를 인터넷으로 전환하기 시작했습니다. 기업 및 개인의 전시와 상호작용의 창구로서 웹사이트는 폭넓은 활용성과 편의성을 갖추고 있습니다. 웹 페이지에서 테이블은 데이터를 표시하는 가장 기본적인 방법이며 실제 응용 프로그램에서 매우 중요합니다. jquery는 현재 가장 널리 사용되는 JavaScript 라이브러리 중 하나이며, DOM 요소를 쉽게 조작하고, Ajax 기술을 통해 백그라운드 데이터와 상호 작용하고, 동적 업데이트를 수행할 수 있는 다양한 편리한 방법을 제공합니다.

이 글에서는 jquery를 사용하여 테이블 행을 추가하고 데이터를 데이터베이스에 저장하는 방법을 소개합니다.

1. 준비

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 링크를 사용하여 직접 가져올 수 있습니다.

2. 구현 프로세스

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의 $() 함수를 사용하여 새 행 요소를 만든 다음 $() 함수를 사용합니다. 이름, 성별, 연령 및 작업을 표시하는 데 4개의 새로운 열 요소가 사용됩니다. 마지막으로 4개의 열 요소를 행 요소에 추가하고 행 요소를 테이블의 마지막 행에 추가합니다.

3. 테이블 행 삭제

행을 삭제해야 하는 경우 다음 함수를 실행할 수 있습니다.

function deleteRow(obj) {

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

}

이 함수는 jquery의 parent() 메서드를 사용하여 행을 찾습니다. 버튼이 위치한 요소를 제거하고, 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 (이름, 성별, 나이) 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 기술을 사용하여 데이터를 저장 파일로 전송하는 데 사용됩니다. 서버 측의 .php 파일. 데이터가 서버 측에 성공적으로 저장되면 프런트 엔드에 "저장 성공!"이라는 프롬프트 메시지가 표시됩니다.

3. 요약

이 글에서는 jquery를 사용하여 테이블 행을 추가하고 데이터를 데이터베이스에 저장하는 방법을 소개합니다. 실제 응용 프로그램에서는 비즈니스 요구 사항에 따라 관련 코드를 적절하게 수정하여 자신의 요구 사항을 충족할 수 있습니다. 동시에 이 기사는 독자가 jquery 및 ajax 기술의 적용을 더 깊이 이해할 수 있도록 안내할 수 있는 간단한 아이디어도 제공합니다.

위 내용은 jquery는 데이터베이스에 테이블 행을 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!