Displaying record details on user click from a list or records by PHP MySQL

Current approach: accessible expandable records

For a new page, fetch only the fields you need with PDO and escape database text before writing it into HTML. Native <details> and <summary> elements can provide an expandable record interface without custom show/hide JavaScript.

<?php
$stmt = $pdo->query(
    'SELECT id, name, class, mark, sex FROM student ORDER BY id LIMIT 10'
);

foreach ($stmt as $row) {
    $name = htmlspecialchars($row['name'], ENT_QUOTES, 'UTF-8');
    $class = htmlspecialchars($row['class'], ENT_QUOTES, 'UTF-8');
    $sex = htmlspecialchars($row['sex'], ENT_QUOTES, 'UTF-8');

    echo "<details>";
    echo "<summary>{$name}</summary>";
    echo "<p>Class: {$class}; Mark: " . (int) $row['mark'] . "; Sex: {$sex}</p>";
    echo "</details>";
}
?>

The original div-and-JavaScript version remains below because it demonstrates manual toggling and DOM updates. For production output, avoid unquoted array keys such as $row[id] and escape user/database text before rendering it.

We have seen how to display records from MySQL table by using PHP. Each record will have more fields so for better user experience we will not display full details and based on the user requirement we can display other details of the record.

We will use our student table and first we will display only names of the students. We will keep one plus + symbol before each name and once the user click the + symbol the full details of the student will be displayed in next line. User can close the full details by clicking - symbol. It is like expanding and closing the details of any record.

We will be toggling our + and - symbol based on the display. If full details are not displayed then + symbol will be shown asking user to click it to expand. Same way - symbol will be shown to close the details already shown.

Demo of displaying records
There are two part of the script. The JavaScript part which manage the display of data and the SQL part which collects records from MySQL and display the same.

We will be using div layers to display our record details and we will also keep our symbols in another div layer.

Original manual-toggle implementation: the following sections preserve the older JavaScript/div approach.

Style sheet to hide layers

As we will be keeping all the details data in div layers so by default we will hide all the div layers.

<style type="text/css">
div {
display: none;
}
</style>

JavaScript part

Each click will pass the id number of the div layer to the JavaScript function display_detail(). This id number is the student id we will be getting from the table against each record. Inside the function first we will check the status of the div layer by using its display property. This will tell us whether the layer is visible or not ( visible means the record details are displayed ).

To know the status of display we will use JavaScript if condition.

function display_detail(id){

var sid='s'+id;
if( document.getElementById(id).style.display == 'inline' ){

If the details layer is not displayed then we will display the layer by managing style.display property. We will also change the symbol to - giving option to user to close the opened details.

document.getElementById(id).style.display = 'inline';// show details

If details are displayed then we will hide the div layer by managing the style display property.
Symbol will be set to +

For each record we will have two div layers. One is symbol layer with a prefix of character s to the id of the student. Other div layer will have same id as student id.

function display_detail(id){
var sid='s'+id;
if( document.getElementById(id).style.display == 'inline' ){
document.getElementById(id).style.display = 'none'; // Hide the details div
document.getElementById(sid).innerHTML = '+';  // Change the symbol to + 

}else {

document.getElementById(id).style.backgroundColor = '#ffff00'; // Add different color to background
document.getElementById(id).style.display = 'inline';  // show the details
document.getElementById(sid).innerHTML = '-'; //Change the symbol to -


} // end of if else
} // end of function

Collecting the records from MySQL table

You can keep your connection string in a separate page and include it in our main script.

require "config.php"; // MySQL connection string

You can get full details of MySQL PDO connection string here.

We will write the query to get records from our student table. We have used SQL LIMIT command to get 10 records only. You can expand as many numbers you want.

$count="SELECT name,id,class,mark,sex FROM student LIMIT 10";

Now we will execute the query and display the records. Note each record has two div layers and as per the style property all layers are hidden. So we have given special inline style property to display our symbols.

echo "<table>";
foreach ($dbo->query($count) as $row) {
$sid='s' . $row[id];
echo "<tr ><td><div id='$sid' style="display:inline" onclick=display_detail($row[id])> + </div> $row[name]</td></tr>";
echo "<tr ><td><div id=$row[id]><b>Class</b> : $row[class] <b> Mark </b>:  $row[mark]  <b>SEX</b> : $row[sex]</div></td></tr>";
}
echo "</table>";

PHP MySQL Collecting single record from MySQL PHP Code generator for PDO & mysqli

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: