HTML and Clickable table cell

Question

I need to make a cell of an HTML table clickable. When this event occurs, a pop-up or windows is shown with some information. Here my current HTML code:

<table class="table1">
<thead>
    <tr>
        <th scope="col">AAAA</th>
        <th scope="col">BBBB</th>
            ....

    </tr>
</thead>
<tbody>
<?php 
    $mystring = "";
            ...
            echo '<td scope="row" style="width: 300px">'.$mystrin.'</td>';
    echo '<td style="background-color:#FFFFFF"></td>';
            ...
?>       
</tbody>
</table>

Now, "$mystring" is displayed inside the cell. I would like to have a cell colored (e.g., background-color:#388643") and if I click on it, a pop-up is displayed with the string "$mystring".

To create a pop-up I use:

     echo "<script type='text/javascript'>alert($mystring);</script>";

but I'm not able to link this with the event "click on this cell"

Answer 1

using pure javascript, without js framework

<tbody>
<?php 
    $mystring = ""; //remember to remore the ' symbol
        ...
        echo '<td scope="row" style="width: 300px" onclick="alert(\'' .$mystrin. '\');">&nbsp;</td>';
        echo '<td style="background-color:#FFFFFF"></td>';
        ...
?>       
</tbody>

Answer 2

try like this

<tbody>
      <td scope="row" style="width: 300px" id="click"><?php echo $mystring; ?></td>
    <td style="background-color:#FFFFFF"></td>     
</tbody>

in script

<script type='text/javascript'>
$("#click").click(function(){
var value=$("#click").val();
alert(value);

});
</script>