CODEWITHSUNDEEP
phphtmlcsssql
petrosg
petrosg

Reputation: 89

clickable HTML table containing data being able to show more data onclick

I have my MySql DB (which contains customer info) and I fetch data from it, showing them in a table. I only show customer name on the table. I want to be able to click on a button, inside each table row, and then show that specific row's additional info

Code Here : 

function customers(){
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "gymdb";
$p = '';
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT * FROM company_customers WHERE company_id=" . $_SESSION['id'] . ";";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $p .= '
        <hmtl>
        <head>

        </head>
        <body>
            <table class="container">
                <thead>
                    <tr>
                        <th><h1>Name</h1></th>
                        <th><h1>Surname</h1></th>
                        <th><h1>More Info</h1></th>
                    </tr>
                </thead>
    ';
    while($row = $result->fetch_assoc()) {
        $p .= '
                <tbody>
                        <tr>
                            <td style="width:50%">' . $row['customer_name'] . '</td>
                            <td>' . $row['customer_surname'] . '</td>
                            <td  style="width:100px" class=thisone onclick="show()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; +</td>
                        </tr>             
                </tbody>
            <script>

            </script>
            </body>
            </html>
            ';
    }
} else {

}
$conn->close();

Upvotes: 1

Views: 727

Answers (3)

EgMusic
EgMusic

Reputation: 134

If you want something like a "READ MORE" button, you are going to need a little JavaScript on your side. On the HTML side, however, you need to line each table cell with <a>, which is a hyperlink. This will make your table to where when you click on it, it expands!

Upvotes: 2

tre
tre

Reputation: 915

<td style="width:100px"
    class=thisone onclick="show('.$row['customer_id'].');">

    <div class="hidden_content" style="display:none;" id="content_'.$row['customer_id'].'">
    ' . $row['customer_name'] . '
    </div>
</td>

Then you need realize show function:

function show(id){
    document.getElementById('content_'+id).style.display='block';
}

Better decision is not send a lot of data to single page and getting additional info by additional ajax query.

Upvotes: 3

Salketer
Salketer

Reputation: 15711

You are on the right track.now it all depends on how you'd like to show them. But your best bet would be by adding all the info you want inside the html part, along with the basic info. Add the class "hidden" or something similar to them. Once the user clicks on the button, find all .hidden elements in the same row, and remove the class.

Another option would be to use ajax to load only the required information... But I'd really stick to the first solution unless there is LOTs of data to send.

Also, double check your class=thisone it should be class="thisone"

Upvotes: 2

Related Questions