I want to create a dynamic table which gets its all its entries coming from database. I know how to make a simple table accordian by this Twitter Bootstrap Use collapse.js on table cells [Almost Done] . If I apply that technique it turns table rows into accordian but no matter which row i click it only expands first row. Here is the code of my table getting data from database.
<div class="container">
<h2>All the Suggestions of HR</h2>
<div class="table-responsive">
<table id="myTable" width="100%" class="table table-striped display responsive nowrap table-hover">
<thead>
<tr>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Message</th>
<th scope="col">department</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
$nr = mysqli_num_rows($result);
while($row = mysqli_fetch_assoc($result)) :
$id = $row['hr_id'];
?>
<tr>
<?php $timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp));
$status = $row['isAnswered'];
?>
<td><?php if ($status == 'true') {
echo "Answerd";
}
else{
echo "Pending";
} ?></td>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php echo $row['message'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
Whenever a row is clicked there is a content i want to show which is different for every row.