Mantas Mantas - 7 months ago 51
HTML Question

PHP HTML Click on specific table window opens a new window with data from database

I don't know how to describe what I want but I'll try.

So for example you have a table which prints data from database. Table is from 2 rows and 3 columns. Column 1 2 holds name and surname and 3rd one holds a comment. 3rd one comment column if its not null says "Comment exists" if its null it says "No comments". On clicking 3rd column which says "Comment exists" should pop small window and show the data which is in database in that column. I would like to know how could I make such thing. I hope you understood me.

<?php
echo "<table border=1>
<tr>
<th>ID</th>
<th>Vardas</th>
<th>Pavardė</th>
<th>Tel.</th>
<th>Markė</th>
<th>Modelis</th>
<th>Reg. nr.</th>
<th>Kėbulo nr.</th>
<th>Auto. rida</th>
<th>Data</th>
<th>Laikas</th>
<th>Gedimas</th>
<th>Diagnostika</th>
<th>Komentaras</th>
<th>Atlieka darbą</th>
<th>Darbo statusas</th>
<th></th>
</tr>";
while($row = mysql_fetch_array($res))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['vardas'] . "</td>";
echo "<td>" . $row['pavarde'] . "</td>";
echo "<td>" . $row['telefonas'] . "</td>";
echo "<td>" . $row['marke'] . "</td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['registracijos_nr'] . "</td>";
echo "<td>" . $row['kebulo_nr'] . "</td>";
echo "<td>" . $row['auto_rida'] . "</td>";
echo "<td>" . $row['data'] . "</td>";
echo "<td>" . $row['laikas'] . "</td>";
echo "<td>" . $row['gedimas'] . "</td>";
echo "<td>" . $row['diag_stat'] . "</td>";
echo "<td>" . $row['diag_kom'] . "</td>";
echo "<td>" . $row['atlieka_darba'] . "</td>";
echo "<td>" . $row['darb_stat'] . "</td>";

echo "<td>
<a href='meistras1edit.php?edit=$row[id]'>Keisti</a></td>";
echo "</tr>";
}
echo "</table>";

echo "</td>
</tr>";
?>


How do I add on click event for this one
echo "<td>" . $row['gedimas'] . "</td>";
to display a full comment from database when this row is clicked?

Answer

You can place an "onclick" event directly in PHP :

<td <?php echo "onclick='displayComment(".$id.")'" ?> >

About the general structure of opening a window, you can build the table pretty easily, and then have another page for displaying the comment if there is.

Code for the table :

<table>
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Has comment ?</th>
  </tr>
<?php
for( $i = 0; $i<count($database_data); $i++){
   $item = $database_data[$i];
   ?><tr>
       <td><?php echo $item[0] ?></td>
       <td><?php echo $item[1] ?></td>
       <td <?php 
          echo "onclick='displayComment("
          echo $item[0].", ".$item[1]
          echo ")'"?>
       ><?php echo $item[2] ? "Comment exists" : "No comments" ?></td>
     </tr>
}

Then you would need to include a javascript file with the following code :

function displayComment(name, surname) {
   window.open(
      "display_comment.php?name="+encodeURI(name)+"&surname="+encodeURI(surname),
      "_blank",
      "height=200, width=300"
}

And lastly, you would need your display_comment.phppage, whose essence would be :

// get comment from database using data in $_GET["name"] and $_GET["surname"]

Comment from <?php echo $_GET["name"]." ".$_GET["surname"] ?> : 
<br>
<?php echo $comment_retrieved_from_database ?>


Alternative

An alternative would be to only record the id of the comment in the HTML code, and then add the onclick events in javascript.

The php code for the cell would be as follows :

<td <?php echo "data-comment-id='$id'" ?> >

And you would add the onclick events in javascript that way :

var tableCells = document.querySelectorAll("td[data-comment-id]");
for(var i=0; i<tableCells.length; i++){
   var cell = tableCells[i];
   var commentId = cell.getAttribute("data-comment-id");
   cell.addEventListener("click", function(){openPopup(commentId);});
}