Absolutely this is feasible! You can seamlessly pull data from your MySQL database and feed it into your outputCartRow function to render a dynamic table. Here's a step-by-step guide to make it work:

1. Create a PHP Script to Fetch Database Data #

First, we'll build a dedicated PHP file (let's name it get_student_assignments.php) that connects to your database, fetches all rows from the student_assignment table, and returns the data as JSON—this format is easy for JavaScript to parse.

Critical Note: I've updated the code to use prepared statements to prevent SQL injection, a major security flaw in your original insert code (you should update that insert script to use prepared statements too!).

<?php
// Enable error reporting for debugging (disable in production)
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Database connection details (fill in your actual credentials)
$host = '127.0.0.1:3307';
$username = 'your_db_username';
$password = 'your_db_password';
$dbname = 'fyp';

// Establish database connection
$conn = mysqli_connect($host, $username, $password, $dbname);

// Handle connection errors
if (!$conn) {
    die(json_encode(['error' => 'Database connection failed: ' . mysqli_connect_error()]));
}

// Prepare and execute secure query
$sql = "SELECT stud_name, stud_id, stud_email, proj_title FROM student_assignment";
$stmt = mysqli_prepare($conn, $sql);

if (!$stmt) {
    die(json_encode(['error' => 'Query preparation failed: ' . mysqli_error($conn)]));
}

mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// Fetch all rows into an array
$assignments = [];
while ($row = mysqli_fetch_assoc($result)) {
    $assignments[] = $row;
}

// Clean up connections
mysqli_stmt_close($stmt);
mysqli_close($conn);

// Return data as JSON
header('Content-Type: application/json');
echo json_encode($assignments);
?>

2. Update Your JavaScript to Fetch Data and Render Rows #

Your original outputCartRow uses document.write, which will overwrite the entire page if called after the page finishes loading. Let's adjust it to append rows to an existing table, then use the browser's fetch() API to pull data from our PHP script.

First, make sure your HTML has a table with a <tbody> where rows will be inserted:

<table id="assignmentTable" border="1">
  <thead>
    <tr>
      <th>Student Name</th>
      <th>Student ID</th>
      <th>Email</th>
      <th>Project Title</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- Dynamic rows will go here -->
  </tbody>
</table>

Now update your JavaScript code:

// Updated outputCartRow: appends rows to a target tbody (no more document.write!)
function outputCartRow(name, id, email, proj_title) {
    const tableBody = document.getElementById('tableBody');
    const row = document.createElement('tr');
    
    // Use template literals for cleaner HTML
    row.innerHTML = `
      <td>${name}</td>
      <td>${id}</td>
      <td>${email}</td>
      <td>${proj_title}</td>
    `;
    
    tableBody.appendChild(row);
}

// Function to load data from PHP and render rows
function loadStudentAssignments() {
    fetch('get_student_assignments.php')
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch data from server');
            }
            return response.json();
        })
        .then(data => {
            // Handle errors returned from PHP
            if (data.error) {
                console.error('Server error:', data.error);
                alert('Failed to load student assignments. Check console for details.');
                return;
            }
            // Loop through each assignment and render a row
            data.forEach(assignment => {
                outputCartRow(assignment.stud_name, assignment.stud_id, assignment.stud_email, assignment.proj_title);
            });
        })
        .catch(error => {
            console.error('Fetch error:', error);
            alert('Could not connect to server to load data.');
        });
}

// Load data when the page is fully loaded
window.addEventListener('DOMContentLoaded', loadStudentAssignments);

3. Key Improvements & Notes #

• Security: Always use prepared statements for all database interactions (both read and write) to block SQL injection attacks. I've included this in the fetch script—make sure to update your existing insert PHP code to follow this practice.
• Credentials: Never hardcode database credentials in production. Use environment variables or a config file stored outside your web root.
• Error Handling: The code includes basic error handling for both server and client issues. You can expand this to show more user-friendly messages on the page.
• Performance: If your table has many rows, consider adding pagination to avoid loading all data at once.

内容的提问来源于stack exchange，提问作者Mainaqisyah