MySQL と JavaScript を使用して動的データテーブルを作成する方法

MySQL と JavaScript を使用して動的データ テーブルを作成する方法

概要:
現代の Web 開発では、動的データ テーブルは非常に一般的なコンポーネントです。データベース管理システム MySQL とフロントエンド プログラミング言語 JavaScript を使用すると、データベース内のデータを表示および操作するための動的なデータ テーブルを簡単に作成できます。この記事では、MySQL と JavaScript を使用して動的データ テーブルを作成する方法を詳しく紹介し、具体的なコード例を示します。

ステップ:

1. データベースとテーブルの作成:
   まず、MySQL にデータベースを作成し、その中に表示する必要のあるデータを保存するテーブルを作成する必要があります。 。簡単な例を次に示します:

CREATE DATABASE my_database;
USE my_database;
CREATE TABLE my_table (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50),
    age INT,
    email VARCHAR(100)
);

2. データベースへの接続:
   次に、JavaScript を使用して MySQL データベースに接続する必要があります。通常、この機能を実現するには MySQL の公式ドライバー (node-mysql など) を使用します。以下はデータベースに接続するためのサンプル コードです:

const mysql = require('mysql');

const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'your_username',
    password : 'your_password',
    database : 'my_database'
});

connection.connect((err) => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

上記のコードの your_username と your_password を実際の MySQL に置き換えてください。ユーザー名とパスワード。

3. データベースのクエリ:
   データベースへの接続に成功したら、JavaScript を使用してデータベース内のデータをクエリし、データ テーブルに表示できます。以下は、データベースにクエリを実行してデータを表示する簡単なサンプル コードです。

const sql = 'SELECT * FROM my_table';

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Fetched data from database:', result);

    // 将数据展示在表格中
    const table = document.getElementById('data-table');
    result.forEach((row) => {
        const newRow = table.insertRow();
        Object.values(row).forEach((value) => {
            const cell = newRow.insertCell();
            cell.innerHTML = value;
        });
    });
});

上の例では、単純な SELECT ステートメントを実行してデータベース内のすべてのデータを取得し、それを In に表示しました。 ID data-table を持つ HTML テーブル。

4. その他の操作:​​
   データのクエリに加えて、JavaScript を使用して、データの挿入、更新、削除などの他のデータベース操作を実行することもできます。以下は、データを挿入するためのサンプル コードです。

const sql = `INSERT INTO my_table (name, age, email) VALUES ('John', 25, 'john@example.com')`;

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Inserted a new row into the database');
});

上記のコードは、データベースの my_table テーブルに新しいデータ行を挿入します。

概要:
MySQL と JavaScript を使用すると、動的データテーブルを簡単に作成し、データベース内のデータを表示および操作できます。この記事では、データベースへの接続、データのクエリ、その他の操作を実行するための具体的なコード例を示します。動的データ テーブルを開発する際に皆さんに役立つことを願っています。

以上がMySQL と JavaScript を使用して動的データテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。