jqueryはテーブル行データベースを追加します

インターネット技術の継続的な発展に伴い、ますます多くの企業、機関、個人がビジネスをインターネットに転換し始めています。企業および個人の表示と交流の窓口として、この Web サイトは幅広い適用性と利便性を備えています。 Web ページでは、テーブルはデータを表示する最も基本的な方法であり、実際のアプリケーションでは非常に重要です。 jquery は現在最も広く使用されている JavaScript ライブラリの 1 つであり、DOM 要素を簡単に操作したり、ajax テクノロジを介してバックグラウンド データと対話したり、動的更新を実現したりするための便利なメソッドが多数提供されています。

この記事では、jquery を使用してテーブル行を追加し、データをデータベースに保存する方法を紹介します。

1. 準備

1. データベースと関連テーブルを作成し、フィールド名とデータ型を設定します。

この記事では、Mysql を例として、test_db という名前のデータベースを作成し、そのデータベースに test_table という名前のテーブルを作成します。テーブルには、id INT(11) AUTO_INCREMENT、name VARCHAR( 20)、sex の 4 つのフィールドが含まれています。 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.Web ページに jquery ライブラリ ファイルを導入します

この記事では jquery3.5.1 バージョンを使用しています。公式 Web サイトからファイルをダウンロードすることも、cdn リンクを使用して直接インポートすることもできます。

##<スクリプト src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">

2. 実装プロセス

1. ページレイアウト

まず、Web ページ内にテーブルを作成し、ヘッダーを設定する必要があります。

＃＃＃名前＃＃＃ ＃＃＃性別＃＃＃ ＃＃＃年＃＃＃ 操作次に、テーブル行を追加する関数を実装する必要があります。「追加」ボタンをクリックすると関数が実行され、新しい行が追加されます。テーブルの最後の行に挿入されます。 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);

			2. テーブル行の追加

}

この関数では、まずユーザーが入力した名前、性別、年齢を取得し、jquery の $() 関数を使用して新しい行要素を作成し、$() 関数を使用して名前、性別、年齢、操作を表示するために使用される 4 つの新しい列要素を作成します。最後に、4 つの列要素を行要素に追加し、行要素をテーブルの最後の行に追加します。

3. テーブル行の削除

行を削除する必要がある場合は、次の関数を実行できます:

function deleteRow(obj) {

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

}

この関数は、jquery のparents() メソッドを使用してボタンが配置されている行要素を検索し、remove() メソッドを使用してそのボタンを 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 (name, sex, age) 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 テクノロジーを使用して、データはサーバー側の save.php ファイルに転送されます。データがサーバー側で正常に保存されると、フロントエンドによって「正常に保存されました!」というプロンプト メッセージがポップアップ表示されます。

3. 概要

この記事では、jquery を使用してテーブル行を追加し、データをデータベースに保存する方法を紹介します。実際のアプリケーションでは、ビジネス ニーズに応じて関連するコードを適切に変更し、独自のニーズを満たすことができます。同時に、この記事では、読者が jquery と ajax テクノロジのアプリケーションをより深く理解できるようにガイドする簡単なアイデアも提供します。

以上がjqueryはテーブル行データベースを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。